@galaxy-io/dls 2.9.0 → 2.10.0

package/dist/layout/PageLayout.js

@@ -0,0 +1,116 @@
+import Text, { TextSize, TextWeight } from "../text/Text.js";
+import Divider from "./Divider.js";
+import { hasContent } from "../inputs/internal/predicates.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { forwardRef, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/PageLayout.tsx
+/**
+* The chrome of one page in a Galaxy module: a 64px header with the page title and its actions, a
+* hairline, then the optional `banner`, `tabs` and `toolbar` rows, then the page body in a `<main>`.
+* It fills the column it is given (AppFrame's page column) and never scrolls; the body is
+* `background.base` with `overflow: hidden`, and the page opts into scrolling with a `ScrollArea`
+* (the reset hides native scrollbars, so a bare `overflow: auto` would scroll with no bar).
+*
+* `header` follows Modal, Drawer and Widget: a string renders as an `h1` (`HEADING_MD`, medium, one
+* line) and a node renders as is (a back button and a breadcrumb, a title with a status `Chip`).
+* Either way it names the `<main>` landmark. The header row is 32px tall, the `MEDIUM` control
+* rung, sitting on a 16px inset at the bottom of the 64px band, so a title and a `SMALL` or
+* `MEDIUM` button share a center.
+*
+* `banner` sits under the header's hairline and above the tabs, as in Modal and Drawer, for an
+* `Alert isBanner` that stays put while the body scrolls. `toolbar` is a padded row (filters, a
+* search, view switches) with its own hairline under it.
+*
+* It belongs to the module frame: `AppFrame` + PageLayout + a header-less `SidebarNav`. A standalone
+* app's `Topbar` is app chrome (breadcrumbs, search), not the page title, and the two frames are
+* never mixed. Not a card (`Widget`), not an overlay (`Modal`, `Drawer`).
+*/
+/** The page: a column that fills the frame's page column and never overflows it. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-PageLayout-rqlvk19",
+	propsAsIs: false
+});
+/** Everything above the body: never shrinks, so the body gives up the height. */
+var Head = /*#__PURE__*/ styled("div")({
+	name: "Head",
+	class: "gx-PageLayout-Head-h1n8da9l",
+	propsAsIs: false
+});
+/**
+* The 64px header band (48 + 16): the title row sits on a 16px inset at its bottom, 16px in from
+* both sides, so the title lines up with the body's 16px padding below.
+*/
+var HeaderBand = /*#__PURE__*/ styled("div")({
+	name: "HeaderBand",
+	class: "gx-PageLayout-HeaderBand-homwm0",
+	propsAsIs: false
+});
+/** The title row: the `MEDIUM` control rung tall, title at the start, actions at the end. */
+var HeaderRow = /*#__PURE__*/ styled("div")({
+	name: "HeaderRow",
+	class: "gx-PageLayout-HeaderRow-h1g2txxb",
+	propsAsIs: false
+});
+/** The title (string or node): takes the free width and truncates before the actions move. */
+var Title = /*#__PURE__*/ styled("div")({
+	name: "Title",
+	class: "gx-PageLayout-Title-tieplva",
+	propsAsIs: false
+});
+/** The actions: never shrink, so the title gives up the width first. */
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-PageLayout-Actions-a1g2osxc",
+	propsAsIs: false
+});
+/** The toolbar row: 8px over and under, 16px in from the sides, controls 8px apart. */
+var Toolbar = /*#__PURE__*/ styled("div")({
+	name: "Toolbar",
+	class: "gx-PageLayout-Toolbar-t1jq83mv",
+	propsAsIs: false
+});
+/**
+* The body: the canvas fill, and clipped. It takes the rest of the height and may shrink to
+* nothing, so a `ScrollArea` inside it gets a bounded height to scroll in.
+*/
+var Main = /*#__PURE__*/ styled("main")({
+	name: "Main",
+	class: "gx-PageLayout-Main-m15sg9c6",
+	propsAsIs: false
+});
+/** One page of a Galaxy module: header, hairline, banner, tabs, toolbar, then the body. */
+var PageLayout = forwardRef(function PageLayout({ header, actions, banner, tabs, toolbar, children, id, className, style, ...rest }, ref) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: [/* @__PURE__ */ jsxs(Head, { children: [
+			/* @__PURE__ */ jsx(HeaderBand, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [/* @__PURE__ */ jsx(Title, {
+				id: titleId,
+				children: typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
+					as: "h1",
+					size: TextSize.HEADING_MD,
+					weight: TextWeight.MEDIUM,
+					lineClamp: 1,
+					children: header
+				}) : header
+			}), hasContent(actions) && /* @__PURE__ */ jsx(Actions, { children: actions })] }) }),
+			/* @__PURE__ */ jsx(Divider, {}),
+			hasContent(banner) && banner,
+			hasContent(tabs) && tabs,
+			hasContent(toolbar) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Toolbar, { children: toolbar }), /* @__PURE__ */ jsx(Divider, {})] })
+		] }), /* @__PURE__ */ jsx(Main, {
+			"aria-labelledby": titleId,
+			children
+		})]
+	});
+});
+PageLayout.displayName = "PageLayout";
+//#endregion
+export { PageLayout as default };

package/dist/layout/PendingLayout.d.ts

@@ -0,0 +1,30 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Where the region sits (canonical rungs, subset); picks the Spinner rung. */
+export declare enum PendingLayoutSize {
+    /** A small card or a side panel: Spinner `SMALL`, a 12px ring and a `body_sm` message. */
+    SMALL = "SMALL",
+    /** A panel or a page section. The default: Spinner `MEDIUM`, 14px and `body_md`. */
+    MEDIUM = "MEDIUM",
+    /** A whole page body: Spinner `X_LARGE`, 16px and `body_lg`. */
+    LARGE = "LARGE"
+}
+export interface PendingLayoutProps extends AriaAttributes {
+    /** Visible text beside the ring ("Loading pipelines…"); also what is announced. Without it, "Loading" is announced. */
+    message?: string;
+    /**
+     * Where the region sits; picks the Spinner rung.
+     * @default PendingLayoutSize.MEDIUM
+     */
+    size?: PendingLayoutSize;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A region that is still loading: a Spinner and its message, filled and centred. */
+declare const PendingLayout: import("react").ForwardRefExoticComponent<PendingLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export default PendingLayout;

package/dist/layout/PendingLayout.js

@@ -0,0 +1,57 @@
+import Spinner, { SpinnerSize } from "../feedback/Spinner.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/PendingLayout.tsx
+/**
+* A region that is still loading, filled and centred: a `Spinner` with an optional `message`
+* beside it ("Loading pipelines…"), in a box that fills its parent and centres it both ways. The
+* Spinner is `role="status"`: the message, or "Loading", is announced.
+*
+* A Spinner and not the animated Galaxy logomark: it needs no `lottie-react` peer or animation
+* data, it is already a status region, and a Galaxy logomark inside a product module would sit
+* near the product's wordmark, which the brand rules never allow (decision, DLS 2.10).
+*
+* Siblings: `EmptyLayout` (loaded, nothing to show), `ErrorLayout` (failed). For rows or a card
+* whose shape is known, prefer `Skeleton`, which holds the layout while it loads.
+*/
+/** Where the region sits (canonical rungs, subset); picks the Spinner rung. */
+var PendingLayoutSize = /* @__PURE__ */ function(PendingLayoutSize) {
+	/** A small card or a side panel: Spinner `SMALL`, a 12px ring and a `body_sm` message. */
+	PendingLayoutSize["SMALL"] = "SMALL";
+	/** A panel or a page section. The default: Spinner `MEDIUM`, 14px and `body_md`. */
+	PendingLayoutSize["MEDIUM"] = "MEDIUM";
+	/** A whole page body: Spinner `X_LARGE`, 16px and `body_lg`. */
+	PendingLayoutSize["LARGE"] = "LARGE";
+	return PendingLayoutSize;
+}({});
+/** Fills the region and centres the spinner in it. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-PendingLayout-rx7ogqs",
+	propsAsIs: false
+});
+/** The Spinner rung per region: small, medium, and the largest ring for a whole page. */
+var PENDING_LAYOUT_SIZE_TO_SPINNER_SIZE_MAP = {
+	["SMALL"]: SpinnerSize.SMALL,
+	["MEDIUM"]: SpinnerSize.MEDIUM,
+	["LARGE"]: SpinnerSize.X_LARGE
+};
+/** A region that is still loading: a Spinner and its message, filled and centred. */
+var PendingLayout = forwardRef(function PendingLayout({ message, size = "MEDIUM", id, className, style, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Spinner, {
+			size: PENDING_LAYOUT_SIZE_TO_SPINNER_SIZE_MAP[size],
+			...message === void 0 || message === "" ? {} : { label: message }
+		})
+	});
+});
+PendingLayout.displayName = "PendingLayout";
+//#endregion
+export { PendingLayoutSize, PendingLayout as default };

package/dist/layout/internal/errorState.d.ts

@@ -0,0 +1,14 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+import { EmptyStateSize } from "../../feedback/EmptyState.js";
+/** @internal Props of `ErrorStateContent`. */
+export interface ErrorStateContentProps {
+    size: EmptyStateSize;
+    icon?: PhosphorIcon | undefined;
+    header: string;
+    description?: string | undefined;
+    detail?: string | undefined;
+    actions?: ReactNode;
+}
+/** @internal The error stack, announced assertively (`role="alert"`). */
+export declare function ErrorStateContent({ size, icon, header, description, detail, actions, }: ErrorStateContentProps): import("react").JSX.Element;

package/dist/layout/internal/errorState.js

@@ -0,0 +1,49 @@
+import { FontFamily } from "../../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../../text/Text.js";
+import EmptyState, { EmptyStateSize, EmptyStateVariant } from "../../feedback/EmptyState.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { WarningCircleIcon } from "@phosphor-icons/react";
+//#region src/layout/internal/errorState.tsx
+/**
+* @internal The one error state: an `ERROR` EmptyState (a `WarningCircleIcon` tile by default)
+* and an optional `detail` line (the raw message, mono and selectable), in a `role="alert"` stack.
+* ErrorLayout centres it in a region and TableCore renders it in an empty table body, so a page
+* that failed and a table that failed read the same. Private on purpose (an `internal/` module:
+* built, never a package export).
+*/
+/** The stack: the empty state, then the detail 8px under it, both centred. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-errorState-r12y0h8s",
+	propsAsIs: false
+});
+/** The detail's type step: a caption under a cell or panel state, `body_sm` under a page's. */
+var EMPTY_STATE_SIZE_TO_DETAIL_SIZE_MAP = {
+	[EmptyStateSize.SMALL]: TextSize.CAPTION,
+	[EmptyStateSize.MEDIUM]: TextSize.CAPTION,
+	[EmptyStateSize.LARGE]: TextSize.BODY_SM
+};
+/** @internal The error stack, announced assertively (`role="alert"`). */
+function ErrorStateContent({ size, icon = WarningCircleIcon, header, description, detail, actions }) {
+	return /* @__PURE__ */ jsxs(Root, {
+		role: "alert",
+		children: [/* @__PURE__ */ jsx(EmptyState, {
+			size,
+			variant: EmptyStateVariant.ERROR,
+			icon,
+			header,
+			...description === void 0 || description === "" ? {} : { description },
+			...actions === void 0 ? {} : { actions }
+		}), detail !== void 0 && detail !== "" && /* @__PURE__ */ jsx(Text, {
+			size: EMPTY_STATE_SIZE_TO_DETAIL_SIZE_MAP[size],
+			variant: TextVariant.ERROR,
+			family: FontFamily.MONO,
+			isSelectable: true,
+			children: detail
+		})]
+	});
+}
+//#endregion
+export { ErrorStateContent };

package/dist/layout/internal/region.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal The rule EmptyLayout, ErrorLayout and PendingLayout share: fill the region they are
+ * given and centre their content in it. A CSS-text string like the mixins, interpolated into each
+ * Root (never passed to `cx`). Private on purpose (an `internal/` module: built, never a package
+ * export).
+ *
+ * `height: 100%` fills a block parent with a height; `flex: 1 1 auto` with `min-height: 0` fills
+ * a flex column (PageLayout's body, a Widget body) without overflowing it.
+ */
+export declare const REGION_FILL = "\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n";

package/dist/layout/internal/region.js

@@ -0,0 +1,24 @@
+//#region src/layout/internal/region.ts
+/**
+* @internal The rule EmptyLayout, ErrorLayout and PendingLayout share: fill the region they are
+* given and centre their content in it. A CSS-text string like the mixins, interpolated into each
+* Root (never passed to `cx`). Private on purpose (an `internal/` module: built, never a package
+* export).
+*
+* `height: 100%` fills a block parent with a height; `flex: 1 1 auto` with `min-height: 0` fills
+* a flex column (PageLayout's body, a Widget body) without overflowing it.
+*/
+var REGION_FILL = `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+`;
+//#endregion
+export { REGION_FILL };

package/dist/lists/DescriptionList.js

@@ -2,6 +2,7 @@ import { FontFamily, Orientation } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import CopyButton from "../buttons/CopyButton.js";
+import "../utils/format.js";
 /* empty css                          */
 import { styled } from "@linaria/react";
 import { forwardRef } from "react";

package/dist/menu/Menu.d.ts

@@ -9,7 +9,7 @@ export declare enum MenuSize {
     /** 32px rows, `body_md` labels, 14px icons, 12px submenu caret. The default. */
     MEDIUM = "MEDIUM"
 }
-/** Panel fill: a surface step (Constitution V-A surface set). */
+/** Panel fill: a surface step (AGENTS.md "Variant": surface set). */
 export declare enum MenuVariant {
     /** The canvas fill, `background.base`. The default. */
     BASE = "BASE",
@@ -20,7 +20,7 @@ export declare enum MenuVariant {
     /** The most elevated fill, `background.tertiary`. */
     TERTIARY = "TERTIARY"
 }
-/** Row mode (Constitution V-A: MenuItem `DEFAULT` / `ERROR`; declared in `scripts/lint-dls.ts` `MODE_SETS`). */
+/** Row mode (AGENTS.md "Variant": the `MenuItemVariant` mode set `DEFAULT` / `ERROR`, declared in `scripts/lint-dls.ts` `MODE_SETS`). */
 export declare enum MenuItemVariant {
     /** A monochrome row. The default. */
     DEFAULT = "DEFAULT",

package/dist/menu/Menu.js

@@ -11,6 +11,7 @@ import Divider from "../layout/Divider.js";
 import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import { InputSize } from "../inputs/Input.js";
+import { isSearchMatch, normalizeSearchTerm } from "../utils/search.js";
 import SearchInput from "../inputs/SearchInput.js";
 /* empty css               */
 import { styled } from "@linaria/react";
@@ -45,7 +46,7 @@ var MenuSize = /* @__PURE__ */ function(MenuSize) {
 	MenuSize["MEDIUM"] = "MEDIUM";
 	return MenuSize;
 }({});
-/** Panel fill: a surface step (Constitution V-A surface set). */
+/** Panel fill: a surface step (AGENTS.md "Variant": surface set). */
 var MenuVariant = /* @__PURE__ */ function(MenuVariant) {
 	/** The canvas fill, `background.base`. The default. */
 	MenuVariant["BASE"] = "BASE";
@@ -57,7 +58,7 @@ var MenuVariant = /* @__PURE__ */ function(MenuVariant) {
 	MenuVariant["TERTIARY"] = "TERTIARY";
 	return MenuVariant;
 }({});
-/** Row mode (Constitution V-A: MenuItem `DEFAULT` / `ERROR`; declared in `scripts/lint-dls.ts` `MODE_SETS`). */
+/** Row mode (AGENTS.md "Variant": the `MenuItemVariant` mode set `DEFAULT` / `ERROR`, declared in `scripts/lint-dls.ts` `MODE_SETS`). */
 var MenuItemVariant = /* @__PURE__ */ function(MenuItemVariant) {
 	/** A monochrome row. The default. */
 	MenuItemVariant["DEFAULT"] = "DEFAULT";
@@ -87,7 +88,7 @@ var ItemRoot = /*#__PURE__*/ styled("button")({
 	class: "gx-Menu-ItemRoot-i1kxcddz",
 	propsAsIs: false
 });
-/** Row height, inline and block padding, and gap per rung (Constitution III-A.4). */
+/** Row height, inline and block padding, and gap per rung (AGENTS.md "Control rungs"). */
 var MENU_SIZE_TO_ITEM_CSS_MAP = {
 	["SMALL"]: "gx-Menu-SMALL-s14ltqej",
 	["MEDIUM"]: "gx-Menu-MEDIUM-m1sw24v2"
@@ -237,16 +238,8 @@ function useMenuContext(part) {
 	if (context === null) throw new Error(`${part} must be rendered inside a Menu or ContextMenu`);
 	return context;
 }
-/** Lower-cased, trimmed term (the filter's comparison form). */
-function normalizeTerm(term) {
-	return term.trim().toLocaleLowerCase();
-}
 /** A row matches when the term is empty or its label (or description) contains it. */
-function matches(term, label, description) {
-	if (term === "") return true;
-	if (label.toLocaleLowerCase().includes(term)) return true;
-	return description?.toLocaleLowerCase().includes(term) ?? false;
-}
+var matches = (term, label, description) => isSearchMatch(term, label, description);
 /** The rows of a list element, in DOM order (portaled submenus are not descendants). */
 function getRows(list) {
 	if (list === null) return [];
@@ -919,7 +912,7 @@ var MenuRoot = forwardRef(function MenuRoot({ trigger, children, size = "MEDIUM"
 	const triggerProps = trigger.props;
 	const triggerId = typeof triggerProps.id === "string" ? triggerProps.id : generatedTriggerId;
 	const closeTree = useCallback(() => setOpen(false), [setOpen]);
-	const term = isSearchable ? normalizeTerm(rawTerm) : "";
+	const term = isSearchable ? normalizeSearchTerm(rawTerm) : "";
 	const rootValue = useMemo(() => ({
 		size,
 		variant,

package/dist/modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
-/** Panel width. Canonical rung names (Constitution V); the values are widths, not control heights. */
+/** Panel width. Canonical rung names (AGENTS.md "Size"); the values are widths, not control heights. */
 export declare enum ModalSize {
     /** 400px: a question or a notice (`ConfirmDialog`). */
     SMALL = "SMALL",
@@ -39,7 +39,7 @@ interface ModalBaseProps extends AriaAttributes {
      * @default true
      */
     isDismissable?: boolean;
-    /** Controlled open state. When set, Modal calls `onOpenChange` and lets the caller decide. */
+    /** Controlled open state. When set, Modal calls `onOpenChange` and lets the caller decide. While it closes, the panel keeps the `children` and slots it had when `isOpen` turned false, so pass the open record as a prop with no hook to retain it. */
     isOpen?: boolean;
     /**
      * Initial open state while uncontrolled.

package/dist/modal/Modal.js

@@ -36,7 +36,7 @@ import { XIcon } from "@phosphor-icons/react";
 * SSR: nothing renders on the server (closed by default, and `Portal` renders nothing there). The
 * scroll lock is CSS keyed on the backdrop; nothing touches `window` or `document` at module scope.
 */
-/** Panel width. Canonical rung names (Constitution V); the values are widths, not control heights. */
+/** Panel width. Canonical rung names (AGENTS.md "Size"); the values are widths, not control heights. */
 var ModalSize = /* @__PURE__ */ function(ModalSize) {
 	/** 400px: a question or a notice (`ConfirmDialog`). */
 	ModalSize["SMALL"] = "SMALL";

package/dist/navigation/CommandPalette.js

@@ -15,6 +15,7 @@ import Fade from "../transform/Fade.js";
 import { useDebouncedValue } from "../hooks/useDebouncedValue.js";
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
 import { InputSize } from "../inputs/Input.js";
+import { isSearchMatch } from "../utils/search.js";
 import SearchInput from "../inputs/SearchInput.js";
 /* empty css                         */
 import { styled } from "@linaria/react";
@@ -81,15 +82,8 @@ function focusPastExitingTrap(target) {
 		window.removeEventListener("focusin", stop, true);
 	}
 }
-/** Whether an item matches the normalized term (label, description or keywords; `includes`). */
-function matches(item, normalized) {
-	if (normalized === "") return true;
-	return [
-		item.label,
-		item.description ?? "",
-		...item.keywords ?? []
-	].some((field) => field.toLocaleLowerCase().includes(normalized));
-}
+/** Whether an item matches the term: its label, description or keywords (the shared search rule). */
+var matches = (item, term) => isSearchMatch(term, item.label, item.description, ...item.keywords ?? []);
 /**
 * Scroll lock: while the backdrop is mounted (open or exiting) the page does not scroll. Keyed on
 * this module's backdrop, so it holds until the last modal backdrop is gone.
@@ -250,8 +244,7 @@ var CommandPalette = forwardRef(function CommandPalette({ items, isOpen: isOpenP
 		setActiveId(null);
 		setHasTyped(true);
 	};
-	const normalized = term.trim().toLocaleLowerCase();
-	const visibleItems = onSearch === void 0 ? items.filter((item) => matches(item, normalized)) : items;
+	const visibleItems = onSearch === void 0 ? items.filter((item) => matches(item, term)) : items;
 	const recentItems = storageKey !== void 0 && term === "" ? recentIds.flatMap((recentId) => {
 		const item = items.find((candidate) => candidate.id === recentId);
 		return item !== void 0 && !item.isDisabled ? [item] : [];

package/dist/navigation/SidebarNav.d.ts

@@ -7,6 +7,11 @@ export interface SidebarNavProps extends AriaAttributes {
     header?: ReactNode;
     /** Content pinned under the list: the account row, `NavItem`s such as Settings, the collapse toggle. */
     footer?: ReactNode;
+    /**
+     * The hairlines under the header and over the footer, together (the Modal and Drawer meaning). On by default, unlike the overlays, because the header's line meets the Topbar's in an app frame.
+     * @default true
+     */
+    hasDividers?: boolean;
     /**
      * Icon rail: items show only their icon (labels and counts move into tooltips), group labels become dividers. Give the parent a 48px width.
      * @default false

package/dist/navigation/SidebarNav.js

@@ -24,6 +24,15 @@ import { ArrowUpRightIcon, CaretRightIcon } from "@phosphor-icons/react";
 * optional count `Chip` and an active state for the current page. `isCollapsed` turns the column
 * into an icon rail whose labels move into tooltips.
 *
+* `hasDividers` (on by default) draws the hairline under the header and over the footer. A frame
+* whose own chrome already separates the column (a header-less SidebarNav in an inset frame) turns
+* them off.
+*
+* Two frame systems use it. In a standalone app it sits beside a `Topbar` with a `header`: both
+* rows are 48px, so their hairlines meet. In a Galaxy module it goes in `AppFrame` with no `header`
+* (the host draws the brand), `hasDividers={false}` for a footer with no line. Never a `header`
+* inside AppFrame: its line would meet nothing.
+*
 * SidebarNav fills the box its parent gives it (the app's frame sizes, resizes and collapses that box)
 * and never routes: the app passes `href` and derives `isActive` from the current route. Sibling
 * views inside a page are `Tabs`; a hierarchy of records is a `Tree`.
@@ -63,76 +72,80 @@ var Footer = /*#__PURE__*/ styled("div")({
 	class: "gx-SidebarNav-Footer-f1bmww1o",
 	propsAsIs: false
 });
+/** `hasDividers`: the header's bottom hairline. Inside the 48px box (border-box), so the row height holds. */
+var HEADER_DIVIDER_CSS = "gx-SidebarNav-HEADER_DIVIDER_CSS-hwiy54t";
+/** `hasDividers`: the footer's top hairline. */
+var FOOTER_DIVIDER_CSS = "gx-SidebarNav-FOOTER_DIVIDER_CSS-f1otz5la";
 /** A list item holding one `NavItem`. */
 var ItemLi = /*#__PURE__*/ styled("li")({
 	name: "ItemLi",
-	class: "gx-SidebarNav-ItemLi-iwiy54t",
+	class: "gx-SidebarNav-ItemLi-ijewkq1",
 	propsAsIs: false
 });
 /** The shared item box: a link or a button on the `MEDIUM` rung (a plain string, like the mixins). */
 var ItemLink = /*#__PURE__*/ styled("a")({
 	name: "ItemLink",
-	class: "gx-SidebarNav-ItemLink-i1otz5la",
+	class: "gx-SidebarNav-ItemLink-i12h7i8o",
 	propsAsIs: false
 });
 var ItemButton = /*#__PURE__*/ styled("button")({
 	name: "ItemButton",
-	class: "gx-SidebarNav-ItemButton-ijewkq1",
+	class: "gx-SidebarNav-ItemButton-i156g88p",
 	propsAsIs: false
 });
 var LetterBox = /*#__PURE__*/ styled("span")({
 	name: "LetterBox",
-	class: "gx-SidebarNav-LetterBox-l12h7i8o",
+	class: "gx-SidebarNav-LetterBox-l1ka7is",
 	propsAsIs: false
 });
 var Trailing = /*#__PURE__*/ styled("span")({
 	name: "Trailing",
-	class: "gx-SidebarNav-Trailing-t156g88p",
+	class: "gx-SidebarNav-Trailing-tls5awu",
 	propsAsIs: false
 });
 /** A section: its heading (or the rail divider) and its own list. */
 var GroupRoot = /*#__PURE__*/ styled("li")({
 	name: "GroupRoot",
-	class: "gx-SidebarNav-GroupRoot-g1ka7is",
+	class: "gx-SidebarNav-GroupRoot-g4ix9y9",
 	propsAsIs: false
 });
 var GroupList = /*#__PURE__*/ styled("ul")({
 	name: "GroupList",
-	class: "gx-SidebarNav-GroupList-gls5awu",
+	class: "gx-SidebarNav-GroupList-gqfe40h",
 	propsAsIs: false
 });
 var GroupLabel = /*#__PURE__*/ styled("div")({
 	name: "GroupLabel",
-	class: "gx-SidebarNav-GroupLabel-g4ix9y9",
+	class: "gx-SidebarNav-GroupLabel-g9ff0oz",
 	propsAsIs: false
 });
 var GroupToggle = /*#__PURE__*/ styled("button")({
 	name: "GroupToggle",
-	class: "gx-SidebarNav-GroupToggle-gqfe40h",
+	class: "gx-SidebarNav-GroupToggle-g6f6h0i",
 	propsAsIs: false
 });
 /** The rail's stand-in for a section heading; the first section has none. */
 var GroupDivider = /*#__PURE__*/ styled("div")({
 	name: "GroupDivider",
-	class: "gx-SidebarNav-GroupDivider-g9ff0oz",
+	class: "gx-SidebarNav-GroupDivider-gyqt4ix",
 	propsAsIs: false
 });
 /** Rail mode: the header content and the footer content center in the 48px column. */
-var ROOT_COLLAPSED_CSS = "gx-SidebarNav-ROOT_COLLAPSED_CSS-r6f6h0i";
+var ROOT_COLLAPSED_CSS = "gx-SidebarNav-ROOT_COLLAPSED_CSS-rieaizt";
 /** The scrolling list takes the height between header and footer. */
-var LIST_SCROLL_CSS = "gx-SidebarNav-LIST_SCROLL_CSS-lyqt4ix";
-var ITEM_LI_COLLAPSED_CSS = "gx-SidebarNav-ITEM_LI_COLLAPSED_CSS-iieaizt";
+var LIST_SCROLL_CSS = "gx-SidebarNav-LIST_SCROLL_CSS-lo6ca5i";
+var ITEM_LI_COLLAPSED_CSS = "gx-SidebarNav-ITEM_LI_COLLAPSED_CSS-iuopbgu";
 /** Hover and press on an enabled item that is not the current page. */
-var ITEM_INTERACTIVE_CSS = "gx-SidebarNav-ITEM_INTERACTIVE_CSS-io6ca5i";
+var ITEM_INTERACTIVE_CSS = "gx-SidebarNav-ITEM_INTERACTIVE_CSS-i6m4lrh";
 /** The current page: the selection fill (`background.selected`) and primary text (hover keeps it). */
-var ITEM_ACTIVE_CSS = "gx-SidebarNav-ITEM_ACTIVE_CSS-iuopbgu";
-var ITEM_DISABLED_CSS = "gx-SidebarNav-ITEM_DISABLED_CSS-i6m4lrh";
+var ITEM_ACTIVE_CSS = "gx-SidebarNav-ITEM_ACTIVE_CSS-i1qgyulv";
+var ITEM_DISABLED_CSS = "gx-SidebarNav-ITEM_DISABLED_CSS-i189383r";
 /** Rail mode: a 32px square (the 8px list padding makes the rail 48px). */
-var ITEM_COLLAPSED_CSS = "gx-SidebarNav-ITEM_COLLAPSED_CSS-i1qgyulv";
-var LABEL_CSS = "gx-SidebarNav-LABEL_CSS-l189383r";
-var VISUALLY_HIDDEN_CSS = "gx-SidebarNav-VISUALLY_HIDDEN_CSS-v1ietnnw";
+var ITEM_COLLAPSED_CSS = "gx-SidebarNav-ITEM_COLLAPSED_CSS-i1ietnnw";
+var LABEL_CSS = "gx-SidebarNav-LABEL_CSS-l1d4bor0";
+var VISUALLY_HIDDEN_CSS = "gx-SidebarNav-VISUALLY_HIDDEN_CSS-v1rmtlmv";
 /** The primary navigation column: header, scrolling list of items and sections, footer. */
-var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, isCollapsed = false, ariaLabel, id, className, style, ...rest }, ref) {
+var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, hasDividers = true, isCollapsed = false, ariaLabel, id, className, style, ...rest }, ref) {
 	const name = ariaLabel || rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL);
 	const listContext = useMemo(() => ({
 		isCollapsed,
@@ -150,7 +163,10 @@ var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, isCo
 		className: cx(isCollapsed && ROOT_COLLAPSED_CSS, className),
 		style,
 		children: [
-			header !== void 0 && header !== null && header !== false && /* @__PURE__ */ jsx(Header, { children: header }),
+			header !== void 0 && header !== null && header !== false && /* @__PURE__ */ jsx(Header, {
+				className: cx(hasDividers && HEADER_DIVIDER_CSS),
+				children: header
+			}),
 			/* @__PURE__ */ jsx(ScrollArea, {
 				className: LIST_SCROLL_CSS,
 				children: /* @__PURE__ */ jsx(SidebarNavContext.Provider, {
@@ -163,7 +179,10 @@ var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, isCo
 			}),
 			footer !== void 0 && footer !== null && footer !== false && /* @__PURE__ */ jsx(SidebarNavContext.Provider, {
 				value: footerContext,
-				children: /* @__PURE__ */ jsx(Footer, { children: footer })
+				children: /* @__PURE__ */ jsx(Footer, {
+					className: cx(hasDividers && FOOTER_DIVIDER_CSS),
+					children: footer
+				})
 			})
 		]
 	});

package/dist/navigation/Topbar.js

@@ -12,6 +12,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * spacing and the left / right split; everything inside is composed from other components. It
 * does not stick, route or collapse. In an app frame it sits above the page's scrolling region.
 *
+* It belongs to the standalone-app frame (Topbar + a `SidebarNav` with a `header`, whose 48px rows
+* meet on one hairline). A Galaxy module uses `AppFrame` + `PageLayout` instead, whose 64px title
+* row carries the page; the two frames are never mixed.
+*
 * Outside `main`, `article`, `aside`, `nav` and `section` the `<header>` is the page's `banner`
 * landmark, so use one Topbar per page. New in 2.0 (from the rafa prototype).
 */

package/dist/shapes/Circle.d.ts

@@ -13,7 +13,7 @@ export declare enum CircleSize {
     /** 12px, beside `body_lg` (20px line). */
     X_LARGE = "X_LARGE"
 }
-/** Fill color role (Constitution V-A color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
+/** Fill color role (AGENTS.md "Variant": color set). Neutral steps resolve to `color.text.*`, statuses to `color.mark.*`. */
 export declare enum CircleVariant {
     /** `text.primary`. */
     PRIMARY = "PRIMARY",