@parallelworks/ui 0.82.1 → 0.83.0

package/dist/components/Callout.js

@@ -3,7 +3,7 @@ import { CloseIcon, ErrorIcon, InfoIcon, LockIcon, SuccessIcon, WarningIcon } fr
 import { toneIcon, toneSurface } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 var toneIcons = {
 	default: InfoIcon,
@@ -20,38 +20,40 @@ function Callout({ tone = "info", title, children, action, onDismiss, icon, vari
 	const { common } = useStrings();
 	const small = size === "sm";
 	const Icon = toneIcons[tone];
+	const controls = /* @__PURE__ */ jsxs(Fragment, { children: [action !== void 0 && /* @__PURE__ */ jsx("div", {
+		className: cx("flex shrink-0 items-center gap-2", small ? "h-4" : "h-5"),
+		children: action
+	}), onDismiss && /* @__PURE__ */ jsx(IconButton, {
+		size: "xs",
+		icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+		label: common.dismiss,
+		onClick: onDismiss,
+		className: cx("shrink-0", small ? "-my-1 -me-1" : "-my-0.5 -me-1")
+	})] });
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": testId,
 		...live ? { role: tone === "error" ? "alert" : "status" } : {},
 		className: cx("flex items-start", toneSurface[tone], small ? "gap-2 px-3 py-2 text-xs leading-4" : "gap-3 px-4 py-3 text-sm leading-5", variant === "card" ? "rounded-xl border" : "border-0 border-b", className),
-		children: [
-			icon !== false && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: cx("flex shrink-0 items-center", small ? "h-4 [&_svg]:size-4" : "h-5 [&_svg]:size-5", toneIcon[tone]),
-				children: icon ?? /* @__PURE__ */ jsx(Icon, {})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [title !== void 0 && /* @__PURE__ */ jsx("p", {
-					className: "m-0 font-medium",
+		children: [icon !== false && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cx("flex shrink-0 items-center", small ? "h-4 [&_svg]:size-4" : "h-5 [&_svg]:size-5", toneIcon[tone]),
+			children: icon ?? /* @__PURE__ */ jsx(Icon, {})
+		}), title !== void 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx("flex items-start", small ? "gap-2" : "gap-3"),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "m-0 min-w-0 flex-1 font-medium",
 					children: title
-				}), children !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: cx(title !== void 0 && "mt-0.5"),
-					children
-				})]
-			}),
-			action !== void 0 && /* @__PURE__ */ jsx("div", {
-				className: cx("flex shrink-0 items-center gap-2", small ? "h-4" : "h-5"),
-				children: action
-			}),
-			onDismiss && /* @__PURE__ */ jsx(IconButton, {
-				size: "xs",
-				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-				label: common.dismiss,
-				onClick: onDismiss,
-				className: small ? "-my-1 -me-1" : "-my-0.5 -me-1"
-			})
-		]
+				}), controls]
+			}), children !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5",
+				children
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children
+		}), controls] })]
 	});
 }
 //#endregion

package/dist/components/CodeBlock.d.ts

@@ -31,10 +31,13 @@ export interface CodeBlockProps {
     /** The code is still arriving: highlighting is not cached, and the block
      *  keeps its end in view while it is scrolled there. */
     streaming?: boolean | undefined;
+    /** On a phone, reaches past the host's content padding (`p-4`) to the
+     *  container's edges, without corners, so long lines get the screen's width. */
+    bleed?: boolean | undefined;
     className?: string | undefined;
 }
 /** Code to read on a page, such as a workflow's YAML: highlighted in the
  *  theme's code colors, with numbered lines, a copy button and, given a
  *  `filename`, a download button. Markdown's fenced code renders as one, so
  *  both read the same. */
-export declare function CodeBlock({ code, language, title, label, filename, headerActions, copy, lineNumbers, startLine, wrap, fill, maxHeight, streaming, className, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, language, title, label, filename, headerActions, copy, lineNumbers, startLine, wrap, fill, maxHeight, streaming, bleed, className, }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/CodeBlock.js

@@ -66,7 +66,7 @@ function downloadText(text, name) {
 *  theme's code colors, with numbered lines, a copy button and, given a
 *  `filename`, a download button. Markdown's fenced code renders as one, so
 *  both read the same. */
-function CodeBlock({ code, language = "", title, label, filename, headerActions, copy = true, lineNumbers, startLine = 1, wrap = false, fill = false, maxHeight, streaming = false, className }) {
+function CodeBlock({ code, language = "", title, label, filename, headerActions, copy = true, lineNumbers, startLine = 1, wrap = false, fill = false, maxHeight, streaming = false, bleed = false, className }) {
 	const { common: t } = useStrings();
 	const source = code.endsWith("\n") ? code.slice(0, -1) : code;
 	const lines = useMemo(() => source.split("\n"), [source]);
@@ -100,7 +100,7 @@ function CodeBlock({ code, language = "", title, label, filename, headerActions,
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-code-block": "",
-		className: cx("not-prose flex flex-col overflow-hidden rounded-xl bg-(--theme-code-bg) text-(--theme-code-text) shadow-[0_0_0_1px_color-mix(in_oklab,var(--theme-app)_8%,transparent)]", fill && "h-full min-h-0", className),
+		className: cx("not-prose flex flex-col overflow-hidden rounded-xl bg-(--theme-code-bg) text-(--theme-code-text) shadow-[0_0_0_1px_color-mix(in_oklab,var(--theme-app)_8%,transparent)]", fill && "h-full min-h-0", bleed && "max-sm:-mx-4 max-sm:rounded-none", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex h-9 shrink-0 items-center gap-2 pr-1.5 pl-4",
 			children: [/* @__PURE__ */ jsx("div", {

package/dist/components/Meter.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /** A bar's color: the theme's accent, a status, or muted for something stopped. */
 export type BarTone = 'accent' | 'info' | 'success' | 'warning' | 'error' | 'muted';
 declare const trackHeight: {
@@ -32,7 +32,7 @@ export declare function levelTone(value: number, warnAt: number, errorAt: number
 /** How full something is, such as storage used or a quota spent: a reading,
  *  not a task under way (that's `ProgressBar`). The bar is blue, then turns
  *  amber, then red, as it passes `warnAt` and `errorAt`; `tone` overrides that. */
-export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone, format, showValue, valueText, getAriaValueText, minFill, locale, label, 'aria-label': ariaLabel, detail, size, trackClassName, className, }: BarProps & {
+export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone, format, showValue, valueText, getAriaValueText, minFill, animate, locale, label, 'aria-label': ariaLabel, detail, size, trackClassName, className, }: BarProps & {
     value: number;
     min?: number;
     max?: number;
@@ -54,6 +54,10 @@ export declare function Meter({ value, min, max, warnAt, errorAt, tone, okTone,
     /** The narrowest the fill draws for a value above `min`, as a percent of the
      *  track, so a small reading still shows. */
     minFill?: number | undefined;
+    /** Grows the fill in from empty when the bar first shows, and eases it to each new value, for a
+     *  reading that arrives with the page, such as a dashboard's. Still for anyone who asks for
+     *  less motion. */
+    animate?: boolean | undefined;
 }): import("react").JSX.Element;
 /** A further stretch of a progress bar, drawn after its value, such as work
  *  started but not yet done. */

package/dist/components/Meter.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { toneFill } from "./tone.js";
 import { Tooltip } from "./Tooltip.js";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react/meter";
 import { Progress } from "@base-ui/react/progress";
@@ -26,6 +27,21 @@ var trackBaseClassName = "w-full overflow-hidden rounded-full bg-(--theme-border
 function trackClasses(size, end, own) {
 	return cx(trackBaseClassName, trackHeight[size], end && (own ? "shrink-0" : "min-w-0 flex-1"), own);
 }
+function useGrown(grow) {
+	const [grown, setGrown] = useState(!grow);
+	useEffect(() => {
+		if (grown) return;
+		let inner = 0;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => setGrown(true));
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	}, [grown]);
+	return grown;
+}
 /** The tone for `value` against a warning and an error level, for a measure
 *  that's worse the higher it reads; `okTone` below the warning. */
 function levelTone(value, warnAt, errorAt, okTone = "info") {
@@ -34,7 +50,8 @@ function levelTone(value, warnAt, errorAt, okTone = "info") {
 /** How full something is, such as storage used or a quota spent: a reading,
 *  not a task under way (that's `ProgressBar`). The bar is blue, then turns
 *  amber, then red, as it passes `warnAt` and `errorAt`; `tone` overrides that. */
-function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, okTone = "info", format, showValue = "beside", valueText, getAriaValueText, minFill = 0, locale, label, "aria-label": ariaLabel, detail, size = "md", trackClassName, className }) {
+function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, okTone = "info", format, showValue = "beside", valueText, getAriaValueText, minFill = 0, animate = false, locale, label, "aria-label": ariaLabel, detail, size = "md", trackClassName, className }) {
+	const grown = useGrown(animate);
 	const clamped = Math.min(Math.max(value, min), max);
 	const fill = fillClassName[tone ?? levelTone(clamped, warnAt, errorAt, okTone)];
 	const end = showValue === "end";
@@ -45,8 +62,9 @@ function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, o
 	const track = /* @__PURE__ */ jsx(Meter.Track, {
 		className: trackClasses(size, end, trackClassName),
 		children: /* @__PURE__ */ jsx(Meter.Indicator, {
-			className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill),
-			style: minFill > 0 && clamped > min ? { minWidth: `${minFill}%` } : void 0
+			"data-growing": grown ? void 0 : "",
+			className: cx("h-full rounded-full motion-reduce:transition-none", animate ? "transition-[width,min-width] delay-150 duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]" : "transition-[width] duration-300", fill),
+			style: !grown ? { width: 0 } : minFill > 0 && clamped > min ? { minWidth: `${minFill}%` } : void 0
 		})
 	});
 	const share = formatShare(clamped, min, max, format, locale);

package/dist/components/Pagination.js

@@ -59,7 +59,7 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 	const position = summary ?? (known ? t.pager(start, end, pastCap ? end : total, pastCap) : null);
 	return /* @__PURE__ */ jsxs("nav", {
 		"aria-label": t.pagination,
-		className: cx("flex h-10 shrink-0 items-center justify-between gap-3 px-2.5", className),
+		className: cx("flex h-8 shrink-0 items-center justify-between gap-3 px-2.5", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 items-center gap-3 text-xs text-(--theme-muted-text-color)",
 			children: [position && /* @__PURE__ */ jsx("span", {
@@ -118,22 +118,27 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 function PageStep({ to, enabled, label, icon, onPageChange, pageHref }) {
 	if (pageHref && enabled) return /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",
+		size: "xs",
+		className: STEP_TOUCH,
 		icon,
 		label,
 		href: pageHref(to)
 	});
 	return /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",
+		size: "xs",
+		className: STEP_TOUCH,
 		icon,
 		label,
 		disabled: !enabled,
 		onClick: () => onPageChange?.(to)
 	});
 }
+var STEP_TOUCH = "pointer-coarse:size-8";
 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)");
+	size: "xs"
+}), "min-w-6 px-1 tabular-nums pointer-coarse:h-8 pointer-coarse:min-w-8 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 = {

package/dist/components/SettingsCard.d.ts

@@ -13,20 +13,30 @@ export interface SettingsCardProps {
     /** Lets content such as an inline menu reach past the card's rounded edge. */
     overflowVisible?: boolean | undefined;
     className?: string | undefined;
+    /** An error about the whole card, such as its header's Save or Connect failing: at the top of
+     *  the card, inside it, above its rows, and announced. */
+    error?: ReactNode;
     /** SettingRows, and SettingsHeadings between groups of them. */
     children: ReactNode;
 }
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
  *  the next. Cards stack with room between them. An error about one setting, such as its
- *  Save failing, is its row's `error`; one about the whole card goes outside it, such as
- *  an ErrorText under the card, since every child of the card is ruled off as a row. */
-export declare function SettingsCard({ title, description, action, actionAlign, headingLevel, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
+ *  Save failing, is its row's `error`; one about the whole card, such as its header's
+ *  action failing, is the card's `error`. */
+export declare function SettingsCard({ title, description, action, actionAlign, headingLevel, overflowVisible, className, error, children, }: SettingsCardProps): import("react").JSX.Element;
 /** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 export declare function SettingsHeading({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 /** One setting in a SettingsCard: its name and help on the left, its control on
- *  the right, or under the name across the row with `fill`. */
+ *  the right, or under the name across the row with `fill`.
+ *
+ *  On a phone a small control, such as a switch, a checkbox or a short select, stays on the
+ *  name's line at the row's end. One too wide to fit beside the name, such as a text field
+ *  with its Save button, moves to a line of its own and takes the row's width from its start:
+ *  a single wrapper the host puts it in, such as a `<form className="flex gap-2">`, stretches
+ *  across the row, and a text field in it grows while a button beside it keeps its size. A
+ *  control of the host's own that should grow there takes `flex-1`. */
 export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, error, children, }: {
     label: string;
     /** The control's id, so the name labels it. */
@@ -37,8 +47,9 @@ export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, er
     /** Makes the whole row press its control, such as a switch. The control still
      *  handles its own press; stop it propagating there so it doesn't toggle twice. */
     onClick?: (() => void) | undefined;
-    /** An error about this setting, such as its Save failing: under the control, at its start,
-     *  announced, and describing the control that `htmlFor` names. */
+    /** An error about this setting, such as its Save failing: under the row from the name's
+     *  start, or with `fill` under the control from its start, on a wide screen; across the row
+     *  on a phone. It is announced and describes the control that `htmlFor` names. */
     error?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/SettingsCard.js

@@ -6,9 +6,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var HeadingLevel = createContext(3);
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
 *  the next. Cards stack with room between them. An error about one setting, such as its
-*  Save failing, is its row's `error`; one about the whole card goes outside it, such as
-*  an ErrorText under the card, since every child of the card is ruled off as a row. */
-function SettingsCard({ title, description, action, actionAlign = "beside", headingLevel = 2, overflowVisible = false, className, children }) {
+*  Save failing, is its row's `error`; one about the whole card, such as its header's
+*  action failing, is the card's `error`. */
+function SettingsCard({ title, description, action, actionAlign = "beside", headingLevel = 2, overflowVisible = false, className, error, children }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsx(HeadingLevel, {
 		value: headingLevel + 1,
@@ -26,9 +26,16 @@ function SettingsCard({ title, description, action, actionAlign = "beside", head
 					className: "mt-1.5 text-xs leading-snug theme-muted-text",
 					children: description
 				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: cx("panel divide-y divide-(--theme-border)", overflowVisible ? "overflow-visible" : "overflow-hidden"),
-				children
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+				children: [/* @__PURE__ */ jsx(ErrorText, {
+					size: "md",
+					className: "px-4 pt-4",
+					children: error
+				}), /* @__PURE__ */ jsx("div", {
+					className: "divide-y divide-(--theme-border)",
+					children
+				})]
 			})]
 		})
 	});
@@ -42,7 +49,14 @@ function SettingsHeading({ children }) {
 	});
 }
 /** One setting in a SettingsCard: its name and help on the left, its control on
-*  the right, or under the name across the row with `fill`. */
+*  the right, or under the name across the row with `fill`.
+*
+*  On a phone a small control, such as a switch, a checkbox or a short select, stays on the
+*  name's line at the row's end. One too wide to fit beside the name, such as a text field
+*  with its Save button, moves to a line of its own and takes the row's width from its start:
+*  a single wrapper the host puts it in, such as a `<form className="flex gap-2">`, stretches
+*  across the row, and a text field in it grows while a button beside it keeps its size. A
+*  control of the host's own that should grow there takes `flex-1`. */
 function SettingRow({ label, htmlFor, helpText, fill = false, onClick, error, children }) {
 	const errorId = useId();
 	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
@@ -61,39 +75,33 @@ function SettingRow({ label, htmlFor, helpText, fill = false, onClick, error, ch
 		htmlFor,
 		errorId
 	]);
-	const control = /* @__PURE__ */ jsx("div", {
-		className: cx("min-w-0", !fill && [
-			"flex items-center justify-end",
-			"max-md:has-[input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox]]:justify-start",
-			"max-md:has-[input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox]]:*:grow",
-			"max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox])]:min-w-0",
-			"max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox])]:flex-1"
-		]),
-		children
-	});
 	return /* @__PURE__ */ jsxs("div", {
 		role: "none",
 		onClick,
-		className: cx("grid grid-cols-1 gap-x-8 gap-y-2 p-4", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", onClick && "cursor-pointer transition-colors select-none hover:theme-hover"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-y-1",
-			children: [/* @__PURE__ */ jsx("label", {
-				htmlFor,
-				className: "leading-tight font-semibold theme-text",
-				children: label
-			}), helpText && /* @__PURE__ */ jsx("div", {
-				className: "text-xs leading-snug theme-muted-text",
-				children: helpText
-			})]
-		}), hasError ? /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-col gap-y-2",
-			children: [control, /* @__PURE__ */ jsx(ErrorText, {
+		className: cx("gap-x-8 gap-y-2 p-4", "flex flex-wrap items-center", "md:grid md:items-stretch", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", onClick && "cursor-pointer transition-colors select-none hover:theme-hover"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex min-w-0 grow-[999] basis-48 flex-col gap-y-1 self-start", fill && "max-md:basis-full"),
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor,
+					className: "leading-tight font-semibold theme-text",
+					children: label
+				}), helpText && /* @__PURE__ */ jsx("div", {
+					className: "text-xs leading-snug theme-muted-text",
+					children: helpText
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx("flex min-w-0 grow items-center gap-2", !fill && "md:justify-end", fill ? "[&>:only-child]:grow" : "max-md:[&>:only-child]:grow", "max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=file]),textarea)]:min-w-0", "max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=file]),textarea)]:flex-1"),
+				children
+			}),
+			hasError && /* @__PURE__ */ jsx(ErrorText, {
 				id: errorId,
 				size: "md",
-				className: "md:w-0 md:min-w-full",
+				className: cx("basis-full", fill ? "md:col-start-2 md:w-0 md:min-w-full" : "md:col-span-2"),
 				children: error
-			})]
-		}) : control]
+			})
+		]
 	});
 }
 //#endregion

package/dist/components/Table.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 /** Which way a column sorts, as `aria-sort` names it. */
 export type SortDirection = 'ascending' | 'descending' | 'none';
-/** `comfortable` gives each row room; `compact` fits a short key and value
- *  list; `dense` sets small type in tight rows, for a table inside a card or
- *  a panel of figures. */
+/** `comfortable` gives each row room; `compact` fits many rows in little
+ *  height, such as a key and value list or a dashboard card's runs; `dense`
+ *  sets small type in tight rows, for a panel of figures. */
 export type TableDensity = 'comfortable' | 'compact' | 'dense';
 interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     /** Lets the text wrap; by default a cell keeps to one line. */

package/dist/components/Table.js

@@ -9,20 +9,25 @@ var DensityContext = createContext("comfortable");
 var CapsContext = createContext(true);
 var cellY = {
 	comfortable: "py-4",
-	compact: "py-1.5 text-sm",
+	compact: "h-8 py-0 text-sm",
 	dense: "py-1 text-xs"
 };
+var wrapY = {
+	comfortable: false,
+	compact: "py-1",
+	dense: false
+};
 var headerY = {
 	comfortable: "py-3",
-	compact: "py-2",
-	dense: "py-1.5"
+	compact: "py-1.5",
+	dense: "py-1"
 };
 var cellX = "px-3";
 function Item({ wrap = false, children, className, ...tdProps }) {
 	const density = useContext(DensityContext);
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		className: cx(cellX, cellY[density], !wrap && "whitespace-nowrap", className),
+		className: cx(cellX, cellY[density], wrap ? wrapY[density] : "whitespace-nowrap", className),
 		children
 	});
 }

package/dist/components/ToggleGroup.js

@@ -61,10 +61,10 @@ function Chip({ value, label, icon, count, disabled, testId, size }) {
 		value,
 		disabled,
 		"data-testid": testId,
-		className: cx("group aria-pressed:bg-(--theme-accent-subtle)", buttonClasses({
+		className: cx(buttonClasses({
 			variant: "outline",
 			size
-		})),
+		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)"),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
 				className: "inline-flex shrink-0 transition-opacity group-not-aria-pressed:opacity-55",

package/dist/components/buttonClasses.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 //#region src/components/buttonClasses.ts
-var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-[color,background-color,border-color,box-shadow,translate] duration-150 hover:not-disabled:not-aria-disabled:-translate-y-px hover:not-disabled:not-aria-disabled:shadow-(--theme-shadow-sm) active:not-disabled:not-aria-disabled:translate-y-0 active:not-disabled:not-aria-disabled:shadow-none motion-reduce:hover:not-disabled:not-aria-disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-[color,background-color,border-color,box-shadow,translate] duration-150 hover:not-disabled:not-aria-disabled:not-[[aria-pressed]]:-translate-y-px hover:not-disabled:not-aria-disabled:not-[[aria-pressed]]:shadow-(--theme-shadow-sm) active:not-disabled:not-aria-disabled:translate-y-0 active:not-disabled:not-aria-disabled:shadow-none motion-reduce:hover:not-disabled:not-aria-disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
 var variants = {
 	primary: "bg-(--theme-accent) text-(--theme-accent-text) hover:not-disabled:not-aria-disabled:bg-(--theme-accent-hover)",
 	secondary: "border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) hover:not-disabled:not-aria-disabled:bg-(--theme-hover)",

package/dist/graph/DependencyGraph.d.ts

@@ -21,7 +21,7 @@ interface GraphRun {
      *  marked on each job and step they're about, which matters most for one skipped without a log. */
     warnings?: readonly RunWarning[] | null | undefined;
 }
-export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar, bleed, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
@@ -44,6 +44,9 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     onCloseLog?: (() => void) | undefined;
     /** Pins the job list as the page scrolls, under whatever the page already pins at its top. */
     stickySidebar?: boolean | undefined;
+    /** On a phone, the jobs' panel, graph or list, reaches past the host's content padding (`p-4`) to
+     *  the container's edges, without side borders or corners, so a job's row has the screen's width. */
+    bleed?: boolean | undefined;
 }): import("react").JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;