@parallelworks/ui 0.65.2 → 0.66.1

package/README.md

@@ -647,8 +647,8 @@ such as `z-index: 100` for a top bar, rather than a z-index chosen to win:
 | `--layer-overlay` | 1000    | a panel over the page, such as a full-screen log       |
 | `--layer-drawer`  | 1100    | drawers                                                |
 | `--layer-modal`   | 1200    | modals                                                 |
-| `--layer-popover` | 1300    | menus, selects, popovers, hover cards and tooltips, so one opens over the dialog it belongs to |
-| `--layer-toast`   | 1400    | toasts                                                 |
+| `--layer-toast`   | 1300    | toasts, so one stays usable while a modal is open      |
+| `--layer-popover` | 1400    | menus, selects, popovers, hover cards and tooltips, so one opens over the dialog it belongs to and over a toast |
 
 In Tailwind, `z-(--layer-modal)` reads one. Override a value on `:root` to move
 a layer; the defaults sit in a cascade layer, so the host's own rule wins.
@@ -663,10 +663,11 @@ import { AddIcon, TrashIcon } from '@parallelworks/ui/icons'
 ```
 
 `@parallelworks/ui/icons` is the one import point for interface icons. Each
-name is a meaning, such as `RetryIcon` or `WarningIcon`, drawn from
-[Lucide](https://lucide.dev), so every icon shares one 24px grid and one 2px
-stroke. Don't import `lucide-react` directly: a name here keeps one glyph per
-meaning across the apps.
+name is a meaning, such as `RetryIcon` or `WarningIcon`. Every icon is drawn
+for this module by one hand: one path on a 16px grid with a 1.5px stroke, in
+fewer and simpler shapes than a 24px set so it stays crisp at the 16px it's
+mostly shown at. Don't bring in another icon library: a name here keeps one
+glyph per meaning across the apps.
 
 - **Size and color:** an icon is `1em` square in `currentColor`, so it follows
   the text around it. A class such as `size-4` or `h-3 w-3` sets another size,
@@ -690,10 +691,13 @@ meaning across the apps.
   write-up to read, such as a case study, and `NotebookIcon` one notebook.
   `PendingIcon` is a requirement not met yet and `NotRunningIcon` a run not
   started; they share the empty circle, so keep them out of the same list.
-- **Adding an icon:** pick the [Lucide glyph](https://lucide.dev/icons) and add
-  `export const NameIcon = /* @__PURE__ */ icon(Glyph)` to `src/icons.tsx`,
-  named for what it means rather than what it shows. Reuse an existing name
-  when the meaning is the same.
+- **Adding an icon:** draw it as one path on the 16px grid and add
+  `export const NameIcon = /* @__PURE__ */ drawn('M…')` to `src/icons.tsx`,
+  named for what it means rather than what it shows. Reuse the existing parts
+  (the status circle, the person, the file and folder outlines, the
+  bottom-right corner for a plus, minus, check or X) so families match, and
+  check it at 16px beside its neighbours in the `UI/Icons` story. Reuse an
+  existing name when the meaning is the same.
 
 Logos of other companies' products, such as `GitHubIcon` or `UbuntuIcon`, are
 in `@parallelworks/ui/brand-icons`. They take the same props, are filled in the

package/dist/brandIcons.js

@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 /** A one-color logo in the text's color, at the text's size. */
 function brand(viewBox, ...paths) {
-	function Icon({ title, size = "1em", color = "currentColor", strokeWidth: _strokeWidth, absoluteStrokeWidth: _absoluteStrokeWidth, nonScalingStroke: _nonScalingStroke, children, ...props }) {
+	function Icon({ title, size = "1em", color = "currentColor", strokeWidth: _strokeWidth, children, ...props }) {
 		const named = Boolean(title || props["aria-label"] || props["aria-labelledby"]);
 		return /* @__PURE__ */ jsxs("svg", {
 			xmlns: "http://www.w3.org/2000/svg",

package/dist/components/Avatar.js

@@ -54,7 +54,10 @@ function Avatar$1({ src, name, colorKey, size = "md", status, className }) {
 			}, src), /* @__PURE__ */ jsx(Avatar.Fallback, {
 				"aria-hidden": "true",
 				className: cx("flex size-full items-center justify-center", colorBy ? categoryClasses(colorBy) : "bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)"),
-				children: size === "xs" ? firstCharacter(avatarInitials(name)) : avatarInitials(name)
+				children: /* @__PURE__ */ jsx("span", {
+					className: "leading-none [text-box:trim-both_cap_alphabetic]",
+					children: size === "xs" ? firstCharacter(avatarInitials(name)) : avatarInitials(name)
+				})
 			})]
 		}), status && /* @__PURE__ */ jsx("span", {
 			"data-testid": "online-indicator",

package/dist/components/Toast.d.ts

@@ -54,8 +54,8 @@ export interface Toaster {
     }) => Promise<T>;
 }
 /** Shows toasts from anywhere, a component or not. They render in the
- *  `UIProvider`'s viewport, over dialogs and popups, and stay usable while a
- *  modal is open. */
+ *  `UIProvider`'s viewport, over dialogs and under an open popup such as a menu,
+ *  and stay usable while a modal is open. */
 export declare const toast: Toaster;
 /** Whether a dialog's close request came from a press on a toast, which the
  *  dialog ignores: a toast floats over it, so pressing one isn't leaving it. */

package/dist/components/Toast.js

@@ -56,8 +56,8 @@ function show(kind) {
 	});
 }
 /** Shows toasts from anywhere, a component or not. They render in the
-*  `UIProvider`'s viewport, over dialogs and popups, and stay usable while a
-*  modal is open. */
+*  `UIProvider`'s viewport, over dialogs and under an open popup such as a menu,
+*  and stay usable while a modal is open. */
 var toast = {
 	info: show("info"),
 	success: show("success"),

package/dist/components/floating.d.ts

@@ -1,4 +1,4 @@
-/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+/** Above dialogs, toasts and sticky chrome; hidden while its anchor is scrolled out of view. */
 export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";

package/dist/components/floating.js

@@ -1,5 +1,5 @@
 //#region src/components/floating.ts
-/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+/** Above dialogs, toasts and sticky chrome; hidden while its anchor is scrolled out of view. */
 var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A panel of choices: a menu, a select's list, a combobox's list. */

package/dist/graph/StepSummaries.js

@@ -138,6 +138,18 @@ function SummaryBody({ runSlug, path }) {
 		children: data
 	}) });
 }
+function scroller(el) {
+	const { body, documentElement } = el.ownerDocument;
+	let position = getComputedStyle(el).position;
+	for (let node = el.parentElement; node && node !== body; node = node.parentElement) {
+		if (position === "fixed") return null;
+		const style = getComputedStyle(node);
+		if (position === "absolute" && style.position === "static") continue;
+		if (node !== documentElement && /auto|scroll|overlay/.test(style.overflowY) && node.scrollHeight > node.clientHeight) return node;
+		position = style.position;
+	}
+	return null;
+}
 function useNearViewport(ref) {
 	const [near, setNear] = useState(typeof IntersectionObserver === "undefined");
 	useEffect(() => {
@@ -145,7 +157,10 @@ function useNearViewport(ref) {
 		if (near || !el) return;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) setNear(true);
-		}, { rootMargin: "200% 0px" });
+		}, {
+			root: scroller(el),
+			rootMargin: "200% 0px"
+		});
 		observer.observe(el);
 		return () => observer.disconnect();
 	}, [ref, near]);

package/dist/icons.d.ts

@@ -1,6 +1,7 @@
-import type { LucideProps } from 'lucide-react';
-import type { ReactNode } from 'react';
-export interface IconProps extends LucideProps {
+import type { ReactNode, SVGProps } from 'react';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    /** Width and height; the text's size by default. */
+    size?: string | number | undefined;
     /** Names the icon for assistive technology. Without it, or an `aria-label`,
      *  the icon is decoration and hidden from assistive technology. */
     title?: string | undefined;