@parallelworks/ui 0.76.0 → 0.78.0

package/dist/components/Loader.d.ts

@@ -1,5 +1,6 @@
 export interface LoaderProps {
-    /** The spinner's size, in pixels or any CSS length. */
+    /** The spinner's size, in pixels or any CSS length: 48 by default, and 40
+     *  when it fills a page or a section. */
     size?: number | string;
     /** Shown under the spinner, and its accessible name. Without one, the
      *  loader is named with the provider's `loading` string. */
@@ -12,7 +13,12 @@ export interface LoaderProps {
     /** Beside text that already says what is happening, such as a busy button's
      *  label: hidden from assistive technology, and in the text's color. */
     decorative?: boolean;
+    /** Centers it in the room it stands for, so the page needs no box of its
+     *  own: `screen` the whole window, such as while the app starts; `page` the
+     *  page's scrolling region, such as while a route loads; `section` a pane
+     *  or a card with no height of its own. */
+    fill?: 'screen' | 'page' | 'section' | undefined;
 }
 /** Something on the way that has no shape to sketch yet. When its shape is
  *  known, such as rows of a list, sketch it with `Skeleton` instead. */
-export declare function Loader({ size, label, variant, inline, color, decorative, }: LoaderProps): import("react").JSX.Element;
+export declare function Loader({ fill, ...props }: LoaderProps): import("react").JSX.Element;

package/dist/components/Loader.js

@@ -10,9 +10,24 @@ var LOGO_RINGS = [
 	"M9.25,52.35V32.14A22.9,22.9,0,1,1,32.14,55H24.89",
 	"M62.68,32.14A30.54,30.54,0,1,1,1.6,32.14,30.54,30.54,0,1,1,62.68,32.14"
 ];
+var fillClasses = {
+	screen: "flex min-h-dvh w-full items-center justify-center",
+	page: "flex h-dvh max-h-full w-full items-center justify-center",
+	section: "flex w-full items-center justify-center py-16"
+};
 /** Something on the way that has no shape to sketch yet. When its shape is
 *  known, such as rows of a list, sketch it with `Skeleton` instead. */
-function Loader({ size = 48, label, variant = "spinner", inline = false, color, decorative = false }) {
+function Loader({ fill, ...props }) {
+	if (!fill) return /* @__PURE__ */ jsx(LoaderMark, { ...props });
+	return /* @__PURE__ */ jsx("div", {
+		className: fillClasses[fill],
+		children: /* @__PURE__ */ jsx(LoaderMark, {
+			...props,
+			size: props.size ?? (fill === "screen" ? 48 : 40)
+		})
+	});
+}
+function LoaderMark({ size = 48, label, variant = "spinner", inline = false, color, decorative = false }) {
 	const { loading } = useStrings().common;
 	const dimension = typeof size === "number" ? `${size}px` : size;
 	const spinner = /* @__PURE__ */ jsx(RunningIcon, {

package/dist/components/Markdown.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/Markdown.tsx
 var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
 /** Markdown, with highlighted code, math and mermaid diagrams. Links leave in a

package/dist/components/MarkdownImpl.js

@@ -4,8 +4,8 @@ import { readIsDark } from "./useCssIsDark.js";
 import { CODE_THEMES } from "./codeTheme.js";
 import { rehypeHttpsImagesOnly } from "./httpsImages.js";
 import { rehypeCodeBreaks } from "./markdownCodeBreaks.js";
-import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
 import "katex/dist/katex.min.css";

package/dist/components/Menu.d.ts

@@ -1,10 +1,13 @@
 import { Menu as BaseMenu } from '@base-ui/react/menu';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type Styled<Props> = Omit<Props, 'className'> & {
     className?: string | undefined;
 };
+/** A menu's rows: `md` is the standard 14px row, `sm` a 12px one for a compact toolbar. */
+export type MenuSize = 'md' | 'sm';
 export interface MenuPopupProps {
     children: ReactNode;
+    /** On this popup alone, such as a wider floor: `min-w-64`. */
     className?: string | undefined;
     side?: BaseMenu.Positioner.Props['side'];
     align?: BaseMenu.Positioner.Props['align'];
@@ -12,9 +15,24 @@ export interface MenuPopupProps {
     anchor?: BaseMenu.Positioner.Props['anchor'];
     /** Keeps the popup's children mounted while closed, so state they own survives. */
     keepMounted?: boolean;
+    /** The rows' size; a submenu takes its parent's. */
+    size?: MenuSize | undefined;
+    /** Classes on this popup and every submenu it opens, such as token overrides that give a
+     *  terminal's menus its own colors: `[--theme-app-bg:#111827] [--theme-app:#f9fafb]`. */
+    themeClassName?: string | undefined;
+    /** At least as wide as the element it opens from. */
+    matchAnchorWidth?: boolean | undefined;
+    /** Names the menu, where its trigger's text doesn't. */
+    label?: string | undefined;
+    /** Lines above the rows that aren't choices, such as who is signed in. They stay in view
+     *  as the rows scroll, ruled off from them. */
+    header?: ReactNode;
+    /** Rows under the scrolling ones, ruled off from them and always in view, such as "See all".
+     *  The arrow keys reach them last. */
+    footer?: ReactNode;
 }
 /** The portal, positioner and popup every menu needs. */
-export declare function MenuPopup({ children, className, side, align, anchor, keepMounted, }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuPopup({ children, className, side, align, anchor, keepMounted, size, themeClassName, matchAnchorWidth, label, header, footer, }: MenuPopupProps): import("react").JSX.Element;
 export declare function MenuItem({ className, ...props }: Styled<BaseMenu.Item.Props>): import("react").JSX.Element;
 /** A navigation row; give it `render` for a router link. Closes the menu like any item. */
 export declare function MenuLinkItem({ className, ...props }: Styled<BaseMenu.LinkItem.Props>): import("react").JSX.Element;

package/dist/components/Menu.js

@@ -1,26 +1,55 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
+import { usePopupContainer } from "./popupContainer.js";
 import { Menu } from "@base-ui/react/menu";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Menu.tsx
-var itemClassName = panelItemClassName;
+var itemClassName = cx(panelItemClassName, "in-data-[size=sm]:gap-1.5 in-data-[size=sm]:px-1.5 in-data-[size=sm]:py-1");
+var MenuLookContext = createContext({
+	size: "md",
+	themeClassName: void 0
+});
 /** The portal, positioner and popup every menu needs. */
-function MenuPopup({ children, className, side = "bottom", align = "start", anchor, keepMounted = false }) {
-	const fullscreen = useFullscreenContainer();
-	return /* @__PURE__ */ jsx(Menu.Portal, {
-		container: fullscreen,
-		keepMounted,
-		children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			side,
-			align,
-			anchor,
-			sideOffset: 4,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: cx("min-w-44 max-h-(--available-height) overflow-y-auto", "p-1", panelClassName, className),
-				children
+function MenuPopup({ children, className, side = "bottom", align = "start", anchor, keepMounted = false, size, themeClassName, matchAnchorWidth = false, label, header, footer }) {
+	const portal = usePopupContainer();
+	const inherited = use(MenuLookContext);
+	const look = {
+		size: size ?? inherited.size,
+		themeClassName: themeClassName ?? inherited.themeClassName
+	};
+	const pinned = header !== void 0 || footer !== void 0;
+	return /* @__PURE__ */ jsx(MenuLookContext, {
+		value: look,
+		children: /* @__PURE__ */ jsx(Menu.Portal, {
+			...portal,
+			keepMounted,
+			children: /* @__PURE__ */ jsx(Menu.Positioner, {
+				side,
+				align,
+				anchor,
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Menu.Popup, {
+					"data-size": look.size,
+					"aria-label": label,
+					className: cx("min-w-44 max-h-(--available-height)", pinned ? "flex flex-col" : ["overflow-y-auto", "p-1"], panelClassName, look.size === "sm" && "text-xs", look.themeClassName, className, matchAnchorWidth && "min-w-[max(11rem,var(--anchor-width))]"),
+					children: pinned ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						header !== void 0 && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0 border-b border-(--theme-border) px-3 py-2",
+							children: header
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cx("min-h-0 flex-1 overflow-y-auto", "p-1"),
+							children
+						}),
+						footer !== void 0 && /* @__PURE__ */ jsx("div", {
+							className: cx("shrink-0 border-t border-(--theme-border)", "p-1"),
+							children: footer
+						})
+					] }) : children
+				})
 			})
 		})
 	});
@@ -58,7 +87,7 @@ function MenuCheckboxItem({ className, children, ...props }) {
 		...props,
 		className: cx(itemClassName, className),
 		children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
-			className: "ml-auto",
+			className: "ms-auto flex h-5 shrink-0 items-center ps-2 in-data-[size=sm]:h-4",
 			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 opacity-80" })
 		})]
 	});
@@ -79,7 +108,7 @@ function MenuSeparator({ className }) {
 }
 function MenuGroupLabel({ children }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
-		className: "px-2 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+		className: "px-2 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color) in-data-[size=sm]:px-1.5",
 		children
 	});
 }

package/dist/components/MenuEntries.d.ts

@@ -1,7 +1,17 @@
 import { type ReactNode } from 'react';
 interface MenuActionBase {
     label: string;
+    /** Before the label: an icon, or a mark such as a label's color dot. It stays when the
+     *  row is checked, since the check sits at the row's end. */
     icon?: ReactNode;
+    /** A second, muted line under the label, such as what a product holds. A search matches it. */
+    description?: string | undefined;
+    /** The key that does the same from the page, such as `S` or `⌘K`, in plain text at the
+     *  row's end. The menu doesn't bind it; the host does. */
+    shortcut?: string | undefined;
+    /** A small mark at the row's end, such as a dot for something unseen. It is hidden from
+     *  screen readers, so say what it means in `label`. */
+    badge?: ReactNode;
     disabled?: boolean | undefined;
     /** Why the action is disabled, shown on hover and read with its name. */
     disabledReason?: string | undefined;
@@ -17,6 +27,7 @@ interface MenuClickAction extends MenuActionBase {
     href?: never;
     reloadDocument?: never;
     target?: never;
+    current?: never;
     copy?: never;
 }
 /** Navigates to `href`. */
@@ -24,8 +35,12 @@ interface MenuLinkAction extends MenuActionBase {
     href: string;
     /** Loads the page instead of routing, for paths the host's router doesn't serve. */
     reloadDocument?: boolean | undefined;
-    /** `_blank` opens it in a new tab, such as a page outside the app. */
+    /** `_blank` opens it in a new tab, such as a page outside the app: a small arrow at the
+     *  row's end shows it, and screen readers hear it. */
     target?: '_blank' | undefined;
+    /** The page the reader is on, such as the current organization in a switcher: checked at
+     *  the row's end and announced as the current page. */
+    current?: boolean | undefined;
     onClick?: never;
     checked?: never;
     copy?: never;
@@ -41,6 +56,7 @@ interface MenuCopyAction extends MenuActionBase {
     href?: never;
     reloadDocument?: never;
     target?: never;
+    current?: never;
 }
 /** Something a menu row does: runs `onClick`, navigates to `href`, or copies
  *  `copy`. Exactly one, so a row that does nothing when chosen doesn't compile.
@@ -52,11 +68,24 @@ export interface MenuSubmenu {
     icon?: ReactNode;
     items: MenuEntry[];
     search?: MenuSearch | undefined;
+    /** The key that opens it from the page, in plain text by the chevron. */
+    shortcut?: string | undefined;
+    /** Can't be opened, such as Labels where there are none. */
+    disabled?: boolean | undefined;
+    /** Why it can't be opened, shown on hover and read with its name. */
+    disabledReason?: string | undefined;
+    /** More text a menu's search matches, beside the label; a match shows all its rows. */
+    keywords?: string | undefined;
+}
+/** Rows under a heading, which names them for screen readers too. */
+export interface MenuGroup {
+    group: string;
+    items: MenuEntry[];
 }
 export interface MenuDivider {
     divider: true;
 }
-export type MenuEntry = MenuAction | MenuSubmenu | MenuDivider;
+export type MenuEntry = MenuAction | MenuSubmenu | MenuGroup | MenuDivider;
 export declare const menuDivider: MenuDivider;
 /** A field atop a menu that narrows it, submenus included, to the actions it matches. */
 export interface MenuSearch {
@@ -65,6 +94,7 @@ export interface MenuSearch {
     empty: string;
 }
 export declare const isMenuDivider: (entry: MenuEntry) => entry is MenuDivider;
+export declare const isMenuGroup: (entry: MenuEntry) => entry is MenuGroup;
 export declare const isMenuSubmenu: (entry: MenuEntry) => entry is MenuSubmenu;
 /** Gives a menu root its search's filter; `children` renders the root with the query. */
 export declare function MenuFilter({ search, children, }: {
@@ -78,10 +108,16 @@ export declare function MenuEntries({ entries, search, query, }: {
     /** The search's text, from the MenuFilter around the menu's root. */
     query?: string;
 }): import("react").JSX.Element;
+/** A key as `aria-keyshortcuts` spells it: `⌘K` reads Meta+K, `⇧P` Shift+P. */
+export declare function ariaKeyShortcut(shortcut: string | undefined): string | undefined;
 /** Warns in development when an action has no behavior. The types rule that
  *  out, but a JavaScript caller or a cast still can, and its row renders fine
  *  and silently does nothing. */
 export declare function warnIfInert(action: MenuAction, where: string): void;
 /** Runs an action that isn't a link: copies its text or calls its onClick. */
 export declare function useRunAction(): (action: MenuAction) => void;
+/** One action as a menu row: a link, an on/off choice, or a plain item. */
+export declare function ActionRow({ action }: {
+    action: MenuAction;
+}): import("react").JSX.Element;
 export {};