@tonycodes-ui/mortar 0.11.0 → 0.13.0

package/dist/application.d.ts

@@ -3,6 +3,7 @@ import { type ReactNode } from "react";
 import { type Tone } from "./primitives.js";
 import { type SignInProvider } from "./auth.js";
 import { type HeadingLevel } from "./heading.js";
+import { type FlyoutItem } from "./internal.js";
 /**
  * A navigation link; `icon` replaces the default marker in the sidebar. With
  * `children` the item becomes a disclosure: its own `href` is the first link
@@ -55,29 +56,41 @@ export interface StackedShellProps {
     brand: string;
     logo?: ReactNode;
     homeHref?: string;
-    navigation: LinkItem[];
+    /** Top-level links, or labelled groups that open a dropdown panel. */
+    navigation: NavbarItem[];
     actions?: ReactNode;
     /** Page heading shown above the content, e.g. a PageHeading. */
     header?: ReactNode;
     width?: "md" | "lg" | "xl" | "full";
+    /** The bar's surface: default, inverse (the other appearance) or accent (the brand's accent fill). */
+    tone?: NavbarTone;
+    /** A second row of page tabs under the bar, rendered as a TabNav named by `label`. */
+    tabs?: ItemGroup<TabNavItem>;
     children: ReactNode;
     className?: string;
 }
 /** Top navigation with a centred page column: Tailwind's stacked application layout. */
-export declare function StackedShell({ brand, logo, homeHref, navigation, actions, header, width, children, className, }: StackedShellProps): import("react").JSX.Element;
+export declare function StackedShell({ brand, logo, homeHref, navigation, actions, header, width, tone, tabs, children, className, }: StackedShellProps): import("react").JSX.Element;
+/** A labelled group of links that opens a dropdown panel from the bar. */
+export type NavbarGroup = ItemGroup<FlyoutItem>;
+/** A top-level link, or a group; a group holding the current page is marked current. */
+export type NavbarItem = LinkItem | NavbarGroup;
+export type NavbarTone = "default" | "inverse" | "accent";
 export interface NavbarProps {
     brand: string;
     logo?: ReactNode;
     homeHref?: string;
-    /** Top-level links; the navbar has no sub-menus. */
-    items: LinkItem[];
+    /** Top-level links, or labelled groups that open a dropdown panel. */
+    items: NavbarItem[];
     actions?: ReactNode;
+    /** The bar's surface: default, inverse (the other appearance) or accent (the brand's accent fill). */
+    tone?: NavbarTone;
     /** Accessible name of the navigation landmark. */
     label?: string;
     className?: string;
 }
 /** Horizontal application navigation that collapses into a menu on narrow screens. */
-export declare function Navbar({ brand, logo, homeHref, items, actions, label, className, }: NavbarProps): import("react").JSX.Element;
+export declare function Navbar({ brand, logo, homeHref, items, actions, tone, label, className, }: NavbarProps): import("react").JSX.Element;
 export interface BreadcrumbItem {
     label: string;
     href?: string;
@@ -198,6 +211,18 @@ export interface DataTableColumn<T> {
     width?: string;
     /** Clip long values to one line with an ellipsis. */
     truncate?: boolean;
+    /**
+     * How long the column stays as the table narrows (its own width, not the
+     * screen's): `medium` hides below 480px, `low` below 768px. The first
+     * column always shows. Hidden columns leave the accessibility tree too, so
+     * keep what people need in visible columns or on the detail page.
+     */
+    priority?: "high" | "medium" | "low";
+    /**
+     * `end` pins the column to the trailing edge while the table scrolls
+     * sideways, so a row-actions or status column stays reachable.
+     */
+    pin?: "end";
 }
 export interface DataTableProps<T extends {
     id: string;

package/dist/application.js

@@ -5,7 +5,7 @@ import { Button, EmptyState, Input, Notice } from "./primitives.js";
 import { BrandMark, Divider } from "./layout.js";
 import { AuthHeader, ProviderButtons } from "./auth.js";
 import { ArrowDown, ArrowUp, Check, SortArrows } from "./icons.js";
-import { LinkContent, NavGroups, NavTreeLinks, MobileNavDialog, TermList, cx, componentRoot, classedIntroSlots, useDomId, } from "./internal.js";
+import { Flyout, LinkContent, NavGroups, NavTreeLinks, MobileNavDialog, TermList, cx, componentRoot, classedIntroSlots, sectionTone, useDomId, } from "./internal.js";
 function SidebarContent({ brand, logo, workspace, homeHref, navigation, sections = [], footer, label = "Primary", onNavigate, }) {
     return (_jsxs(_Fragment, { children: [brand && (_jsxs(KitLink, { className: "m-workspace", href: homeHref || navigation[0]?.href || "#", children: [_jsx(BrandMark, { logo: logo }), _jsxs("span", { children: [_jsx("strong", { children: brand }), workspace && _jsx("small", { children: workspace })] })] })), _jsxs("nav", { "aria-label": label, children: [_jsx(NavTreeLinks, { items: navigation, marker: true, onNavigate: onNavigate }), _jsx(NavGroups, { groups: sections, marker: true, onNavigate: onNavigate })] }), footer && _jsx("div", { className: "m-user", children: footer })] }));
 }
@@ -29,15 +29,16 @@ export function AppShell({ brand, logo, workspace, homeHref, footer, navigation,
     return (_jsxs("div", { ...componentRoot("AppShell"), className: cx("m-app-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx("aside", { className: "m-sidebar", children: _jsx(SidebarContent, { ...sidebar }) }), _jsxs("div", { className: "m-app-main", children: [_jsxs("header", { className: "m-app-header", children: [_jsx(Button, { variant: "ghost", className: "m-menu-trigger", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: "Menu" }), _jsx("div", { className: "m-header-context", children: header || workspace || brand }), _jsx("div", { className: "m-actions", children: actions })] }), aside ? (_jsxs("div", { className: "m-app-columns", children: [main, _jsx("aside", { className: "m-app-aside", "aria-label": asideLabel, children: aside })] })) : (main)] }), _jsx(MobileNavDialog, { open: open, onClose: () => setOpen(false), title: brand, children: _jsx(SidebarContent, { ...sidebar, onNavigate: () => setOpen(false) }) })] }));
 }
 /** Top navigation with a centred page column: Tailwind's stacked application layout. */
-export function StackedShell({ brand, logo, homeHref, navigation, actions, header, width = "lg", children, className, }) {
+export function StackedShell({ brand, logo, homeHref, navigation, actions, header, width = "lg", tone, tabs, children, className, }) {
     const contentId = useDomId("m-stacked-");
-    return (_jsxs("div", { ...componentRoot("StackedShell"), className: cx("m-stacked-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx(Navbar, { brand: brand, logo: logo, homeHref: homeHref, items: navigation, actions: actions }), _jsxs("main", { id: contentId, tabIndex: -1, "data-width": width, children: [header && _jsx("div", { className: "m-stacked-header", children: header }), children] })] }));
+    return (_jsxs("div", { ...componentRoot("StackedShell"), className: cx("m-stacked-shell", className), children: [_jsx(KitLink, { className: "m-skip", href: `#${contentId}`, children: "Skip to content" }), _jsx(Navbar, { brand: brand, logo: logo, homeHref: homeHref, items: navigation, actions: actions, tone: tone }), tabs && (_jsx("div", { className: "m-stacked-tabs", children: _jsx(TabNav, { label: tabs.label, items: tabs.items }) })), _jsxs("main", { id: contentId, tabIndex: -1, "data-width": width, children: [header && _jsx("div", { className: "m-stacked-header", children: header }), children] })] }));
 }
 /** Horizontal application navigation that collapses into a menu on narrow screens. */
-export function Navbar({ brand, logo, homeHref = "/", items, actions, label = "Primary", className, }) {
+export function Navbar({ brand, logo, homeHref = "/", items, actions, tone, label = "Primary", className, }) {
     const [open, setOpen] = useState(false);
     const id = useId();
-    return (_jsxs("header", { ...componentRoot("Navbar"), className: cx("m-navbar", className), children: [_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx(Button, { variant: "ghost", className: "m-navbar-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: "Menu" }), _jsx("nav", { id: id, "aria-label": label, "data-open": open || undefined, children: items.map((item, index) => (_jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: () => setOpen(false), children: _jsx(LinkContent, { prefix: "nav", icon: item.icon, label: item.label, count: item.count }) }, `${item.label}:${item.href}:${index}`))) }), actions && _jsx("div", { className: "m-actions", children: actions })] }));
+    const close = () => setOpen(false);
+    return (_jsxs("header", { ...componentRoot("Navbar"), className: cx("m-navbar", className), "data-tone": sectionTone(tone), children: [_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx(Button, { variant: "ghost", className: "m-navbar-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen(!open), children: "Menu" }), _jsx("nav", { id: id, "aria-label": label, "data-open": open || undefined, children: items.map((item, index) => "items" in item ? (_jsx(Flyout, { label: item.label, items: item.items, onNavigate: close }, `${item.label}:group:${index}`)) : (_jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: close, children: _jsx(LinkContent, { prefix: "nav", icon: item.icon, label: item.label, count: item.count }) }, `${item.label}:${item.href}:${index}`))) }), actions && _jsx("div", { className: "m-actions", children: actions })] }));
 }
 /** Trail to the current page; the item without an href is the current page. */
 export function Breadcrumbs({ items, label = "Breadcrumb", separator = "slash", className, }) {
@@ -86,6 +87,15 @@ export function MetricGroup({ label, items, variant = "shared", className, }) {
             details: (_jsxs(_Fragment, { children: [_jsx("strong", { children: item.value }), item.previous && (_jsxs("span", { className: "m-metric-previous", children: ["from ", item.previous] })), item.change && (_jsxs("span", { className: "m-metric-change", "data-tone": item.tone && item.tone !== "neutral" ? item.tone : undefined, "data-trend": item.trend, children: [item.trend && (_jsxs(_Fragment, { children: [item.trend === "up" ? _jsx(ArrowUp, {}) : _jsx(ArrowDown, {}), _jsx("span", { className: "m-sr-only", children: item.trend === "up" ? "Increased by " : "Decreased by " })] })), item.change] }))] })),
         })) }));
 }
+/** Responsive attributes shared by a column's `col`, header and cells. */
+function columnLayout(col, index) {
+    return {
+        "data-priority": index > 0 && col.priority && col.priority !== "high"
+            ? col.priority
+            : undefined,
+        "data-pin": col.pin,
+    };
+}
 const collator = new Intl.Collator(undefined, {
     numeric: true,
     sensitivity: "base",
@@ -171,12 +181,14 @@ export function DataTable({ caption, columns, rows, selectedIds = [], onSelectio
                             ? selectedIds.filter((rowId) => rowId !== row.id)
                             : [...selectedIds, row.id]) }) })), columns.map((col, index) => {
                     const content = col.truncate ? (_jsx("span", { className: "m-truncate", children: col.render(row) })) : (col.render(row));
-                    return index === 0 ? (_jsx("th", { scope: "row", "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: href ? (_jsx(KitLink, { className: "m-row-link", href: href, children: content })) : (content) }, col.key)) : (_jsx("td", { "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: content }, col.key));
+                    return index === 0 ? (_jsx("th", { scope: "row", ...columnLayout(col, index), "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: href ? (_jsx(KitLink, { className: "m-row-link", href: href, children: content })) : (content) }, col.key)) : (_jsx("td", { ...columnLayout(col, index), "data-align": columnAlign(col.align), "data-truncate": col.truncate || undefined, children: content }, col.key));
                 })] }, row.id));
     };
-    return (_jsxs("section", { id: id, ...componentRoot("DataTable"), className: cx("m-data-table", className), "aria-label": caption, "data-density": density === "default" ? undefined : density, "data-striped": striped || undefined, children: [(toolbar || selectedIds.length > 0) && (_jsx("div", { className: "m-table-toolbar", children: selectedIds.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [selectedIds.length, " selected"] }), _jsxs("div", { className: "m-actions", children: [bulkActions, _jsx(Button, { variant: "ghost", onClick: () => onSelectionChange?.([]), children: "Clear selection" })] })] })) : (toolbar) })), _jsx("p", { className: loading ? "m-table-state" : "m-sr-only", role: "status", "data-loading": loading || undefined, children: loading ? "Loading records…" : "" }), loading ? null : error ? (_jsx(Notice, { title: "Unable to load records", tone: "danger", announce: true, children: error })) : !rows.length ? (_jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel })) : (_jsx("div", { className: "m-table-scroll", role: "region", "aria-label": `${caption} scroll area`, tabIndex: 0, style: maxHeight ? { maxHeight } : undefined, "data-sticky": maxHeight ? true : undefined, children: _jsxs("table", { children: [_jsx("caption", { className: "m-sr-only", children: caption }), columns.some((col) => col.width) && (_jsxs("colgroup", { children: [onSelectionChange && _jsx("col", { className: "m-table-select-col" }), columns.map((col) => (_jsx("col", { style: col.width ? { width: col.width } : undefined }, col.key)))] })), _jsx("thead", { children: _jsxs("tr", { children: [onSelectionChange && (_jsx("th", { scope: "col", children: _jsx(SelectAll, { checked: allHere, partial: selectedHere.length > 0 && !allHere, onChange: toggleAll }) })), columns.map((col) => {
+    return (_jsxs("section", { id: id, ...componentRoot("DataTable"), className: cx("m-data-table", className), "aria-label": caption, "data-density": density === "default" ? undefined : density, "data-striped": striped || undefined, "data-prioritised": columns.some((col, index) => columnLayout(col, index)["data-priority"])
+            ? true
+            : undefined, children: [(toolbar || selectedIds.length > 0) && (_jsx("div", { className: "m-table-toolbar", children: selectedIds.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [selectedIds.length, " selected"] }), _jsxs("div", { className: "m-actions", children: [bulkActions, _jsx(Button, { variant: "ghost", onClick: () => onSelectionChange?.([]), children: "Clear selection" })] })] })) : (toolbar) })), _jsx("p", { className: loading ? "m-table-state" : "m-sr-only", role: "status", "data-loading": loading || undefined, children: loading ? "Loading records…" : "" }), loading ? null : error ? (_jsx(Notice, { title: "Unable to load records", tone: "danger", announce: true, children: error })) : !rows.length ? (_jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, headingLevel: headingLevel })) : (_jsx("div", { className: "m-table-scroll", role: "region", "aria-label": `${caption} scroll area`, tabIndex: 0, style: maxHeight ? { maxHeight } : undefined, "data-sticky": maxHeight ? true : undefined, children: _jsxs("table", { children: [_jsx("caption", { className: "m-sr-only", children: caption }), columns.some((col) => col.width) && (_jsxs("colgroup", { children: [onSelectionChange && _jsx("col", { className: "m-table-select-col" }), columns.map((col, index) => (_jsx("col", { ...columnLayout(col, index), style: col.width ? { width: col.width } : undefined }, col.key)))] })), _jsx("thead", { children: _jsxs("tr", { children: [onSelectionChange && (_jsx("th", { scope: "col", children: _jsx(SelectAll, { checked: allHere, partial: selectedHere.length > 0 && !allHere, onChange: toggleAll }) })), columns.map((col, index) => {
                                         const direction = sort?.key === col.key ? sort.direction : undefined;
-                                        return (_jsx("th", { scope: "col", "data-align": columnAlign(col.align), "aria-sort": col.sortable ? direction || "none" : undefined, children: col.sortable ? (_jsxs("button", { type: "button", className: "m-sort-button", onClick: () => toggleSort(col.key), children: [col.label, _jsx(SortArrows, { direction: direction })] })) : (col.label) }, col.key));
+                                        return (_jsx("th", { scope: "col", ...columnLayout(col, index), "data-align": columnAlign(col.align), "aria-sort": col.sortable ? direction || "none" : undefined, children: col.sortable ? (_jsxs("button", { type: "button", className: "m-sort-button", onClick: () => toggleSort(col.key), children: [col.label, _jsx(SortArrows, { direction: direction })] })) : (col.label) }, col.key));
                                     })] }) }), groupBy ? (groupRows(rows, visibleRows, groupBy).map(([label, group]) => (_jsxs("tbody", { children: [_jsx(TableGroupRow, { label: label, span: span }), group.map(renderRow)] }, label)))) : (_jsx("tbody", { children: visibleRows.map(renderRow) }))] }) })), footer && _jsx("div", { className: "m-table-footer", children: footer })] }));
 }
 /** Plain semantic table for documents, settings summaries and comparisons without row actions. */

package/dist/illustration.d.ts

@@ -0,0 +1,47 @@
+/** A point in the drawing, in the illustration's viewBox units. */
+export interface NetworkNode {
+    id: string;
+    x: number;
+    y: number;
+    /** Short text drawn under the node. */
+    label?: string;
+    /** accent: the brand's accent fill, to pick out a node. */
+    tone?: "default" | "accent";
+}
+/** A straight connection between two node ids. */
+export interface NetworkConnection {
+    from: string;
+    to: string;
+    /** Whether a signal travels from `from` to `to`. Default true. */
+    signal?: boolean;
+    /** Seconds for this signal to cross; defaults to the illustration's duration. */
+    duration?: number;
+    /** Seconds before this signal starts; defaults to an even stagger. */
+    delay?: number;
+}
+/**
+ * A lightweight network drawing: nodes and connections supplied as data, with
+ * optional signals travelling along the connections. Decorative unless it has
+ * a label. The animation is illustrative: it never represents live activity.
+ */
+export declare function NetworkIllustration({ nodes, connections, width, height, label, description, motion, duration, paused, onPausedChange, id, className, }: {
+    nodes: NetworkNode[];
+    connections: NetworkConnection[];
+    /** Width of the viewBox; the drawing scales to its container. */
+    width?: number;
+    /** Height of the viewBox. */
+    height?: number;
+    /** Makes the drawing informative: an image with this accessible name. Omitted, it is decorative and hidden from assistive technology. */
+    label?: string;
+    /** With a label, a longer description of what the drawing shows. */
+    description?: string;
+    /** auto: signals travel where connections carry one, with a pause control. static: the same drawing without motion. */
+    motion?: "auto" | "static";
+    /** Seconds for a signal to cross a connection. */
+    duration?: number;
+    /** Whether the user has paused the animation; pass with onPausedChange to control it or share it between illustrations. */
+    paused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/illustration.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { componentRoot, cx, useDomId, usePlayback } from "./internal.js";
+const NODE_RADIUS = 8;
+const SIGNAL_RADIUS = 4;
+/**
+ * A lightweight network drawing: nodes and connections supplied as data, with
+ * optional signals travelling along the connections. Decorative unless it has
+ * a label. The animation is illustrative: it never represents live activity.
+ */
+export function NetworkIllustration({ nodes, connections, width = 480, height = 320, label, description, motion = "auto", duration = 3, paused, onPausedChange, id, className, }) {
+    const ref = useRef(null);
+    const titleId = useDomId("m-network-title");
+    const descId = useDomId("m-network-desc");
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const links = connections.flatMap((connection) => {
+        const from = byId.get(connection.from);
+        const to = byId.get(connection.to);
+        return from && to ? [{ ...connection, a: from, b: to }] : [];
+    });
+    const carriers = links.filter((link) => link.signal !== false);
+    const animated = motion === "auto" && carriers.length > 0;
+    const { reason, reduced, userPaused, toggle } = usePlayback(ref, {
+        paused,
+        onPausedChange,
+        enabled: animated,
+    });
+    const informative = Boolean(label);
+    return (_jsxs("div", { ref: ref, id: id, className: cx("m-network", className), ...componentRoot("NetworkIllustration"), "data-motion": motion === "static" ? "static" : undefined, "data-paused": animated ? (reason ?? undefined) : undefined, children: [_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, ...(informative
+                    ? {
+                        role: "img",
+                        "aria-labelledby": titleId,
+                        "aria-describedby": description ? descId : undefined,
+                    }
+                    : { "aria-hidden": true, focusable: false }), children: [informative && _jsx("title", { id: titleId, children: label }), informative && description && _jsx("desc", { id: descId, children: description }), links.map((link, index) => (_jsx("line", { className: "m-network-link", x1: link.a.x, y1: link.a.y, x2: link.b.x, y2: link.b.y }, `${link.from}:${link.to}:${index}`))), animated &&
+                        !reduced &&
+                        carriers.map((link, index) => {
+                            const time = link.duration ?? duration;
+                            const delay = link.delay ?? -((index * time) / carriers.length);
+                            return (_jsx("circle", { className: "m-network-signal", r: SIGNAL_RADIUS, style: {
+                                    "--m-signal-from": `${link.a.x}px ${link.a.y}px`,
+                                    "--m-signal-to": `${link.b.x}px ${link.b.y}px`,
+                                    animationDuration: `${time}s`,
+                                    animationDelay: delay ? `${delay}s` : undefined,
+                                } }, `${link.from}:${link.to}:${index}`));
+                        }), nodes.map((node) => (_jsx("circle", { className: "m-network-node", cx: node.x, cy: node.y, r: NODE_RADIUS, "data-tone": node.tone === "accent" ? "accent" : undefined }, node.id))), nodes.map((node) => node.label && (_jsx("text", { className: "m-network-label", x: node.x, y: node.y + NODE_RADIUS + 16, textAnchor: "middle", children: node.label }, node.id)))] }), animated && !reduced && (_jsx("button", { type: "button", className: "m-network-toggle", onClick: toggle, children: userPaused ? "Play animation" : "Pause animation" }))] }));
+}

package/dist/index.d.ts

@@ -4,10 +4,10 @@ export type { ThemeProviderProps, Appearance, Brand, Density, } from "./foundati
 export { Button, ButtonGroup, ActionLink, Input, Select, TextArea, Checkbox, Fieldset, RadioGroup, Switch, Badge, Tabs, Modal, Dropdown, Notice, EmptyState, ErrorSummary, } from "./primitives.js";
 export type { ButtonProps, ButtonGroupItem, DropdownItem, ErrorSummaryItem, InputProps, LinkAction, Tone, } from "./primitives.js";
 export { AppShell, PageHeading, MetricGroup, DataTable, Table, Pagination, SettingsSection, ActivityFeed, SignInPanel, Sidebar, Navbar, StackedShell, Breadcrumbs, ProgressSteps, TabNav, ActionPanel, } from "./application.js";
-export type { AppShellProps, NavigationItem, DataTableProps, DataTableColumn, TableSort, SortDirection, SignInProvider, SidebarProps, BreadcrumbItem, ProgressStep, TabNavItem, StackedShellProps, NavbarProps, BreadcrumbsProps, TabNavProps, ProgressStepsProps, ActionPanelProps, PageHeadingProps, MetricGroupProps, TableProps, PaginationProps, SettingsSectionProps, ActivityFeedProps, SignInPanelProps, } from "./application.js";
+export type { AppShellProps, NavigationItem, DataTableProps, DataTableColumn, TableSort, SortDirection, SignInProvider, SidebarProps, BreadcrumbItem, ProgressStep, TabNavItem, StackedShellProps, NavbarProps, NavbarItem, NavbarGroup, NavbarTone, BreadcrumbsProps, TabNavProps, ProgressStepsProps, ActionPanelProps, PageHeadingProps, MetricGroupProps, TableProps, PaginationProps, SettingsSectionProps, ActivityFeedProps, SignInPanelProps, } from "./application.js";
 export { AuthLayout, ProviderButtons, PasswordInput, CodeInput, } from "./auth.js";
 export type { AuthLayoutProps, ProviderButtonsProps, PasswordInputProps, PasswordRequirement, PasswordStrength, CodeInputProps, } from "./auth.js";
-export { MarketingHeader, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";
+export { MarketingHeader, MarketingPage, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";
 export type { PricingPlan, PricingExtra, HeaderLink, FlyoutItem, } from "./marketing.js";
 export { SegmentedControl, CodeBlock, PreviewFrame } from "./inspection.js";
 export { Avatar, AvatarGroup, Kbd, ProgressBar, FilterChip, CheckList, DescriptionList, GridList, AttachmentList, } from "./display.js";
@@ -32,3 +32,5 @@ export type { ProductImage, ProductCard, ProductOption, CartItem, FilterFacet, R
 export { CommentComposer } from "./composer.js";
 export type { LinkItem, ItemGroup } from "./navigation.js";
 export type { HeadingLevel } from "./heading.js";
+export { NetworkIllustration } from "./illustration.js";
+export type { NetworkNode, NetworkConnection } from "./illustration.js";

package/dist/index.js

@@ -2,7 +2,7 @@ export { ThemeProvider, AppearanceControl } from "./foundation.js";
 export { Button, ButtonGroup, ActionLink, Input, Select, TextArea, Checkbox, Fieldset, RadioGroup, Switch, Badge, Tabs, Modal, Dropdown, Notice, EmptyState, ErrorSummary, } from "./primitives.js";
 export { AppShell, PageHeading, MetricGroup, DataTable, Table, Pagination, SettingsSection, ActivityFeed, SignInPanel, Sidebar, Navbar, StackedShell, Breadcrumbs, ProgressSteps, TabNav, ActionPanel, } from "./application.js";
 export { AuthLayout, ProviderButtons, PasswordInput, CodeInput, } from "./auth.js";
-export { MarketingHeader, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";
+export { MarketingHeader, MarketingPage, Hero, FeatureGrid, FeatureSection, ProcessSteps, Testimonial, LogoCloud, Pricing, FAQ, CallToAction, Footer, HeaderSection, ContentSection, } from "./marketing.js";
 export { SegmentedControl, CodeBlock, PreviewFrame } from "./inspection.js";
 export { Avatar, AvatarGroup, Kbd, ProgressBar, FilterChip, CheckList, DescriptionList, GridList, AttachmentList, } from "./display.js";
 export { Stack, Container, Text, Section, Divider, Card, MediaObject, SectionHeading, Prose, } from "./layout.js";
@@ -15,3 +15,4 @@ export { Listbox, Combobox } from "./choice.js";
 export { Calendar } from "./calendar.js";
 export { ProductList, ProductOverview, ShoppingCart, OrderSummary, ProductQuickView, ProductFilters, ProductReviews, OrderHistory, } from "./ecommerce.js";
 export { CommentComposer } from "./composer.js";
+export { NetworkIllustration } from "./illustration.js";

package/dist/inspection.js

@@ -1,9 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
 import { KitLink } from "./navigation.js";
 import { componentRoot, cx, useComponentName } from "./internal.js";
 export function SegmentedControl({ label, value, options, onChange, className, }) {
     const name = useComponentName("SegmentedControl");
-    return (_jsx("div", { ...componentRoot(name), className: cx("m-segmented", className), role: "group", "aria-label": label, children: options.map((option) => (_jsx("button", { type: "button", "aria-pressed": value === option.value, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
+    const group = useRef(null);
+    // When the options scroll (narrow screens), keep the selected one in view,
+    // on mount and on change. Only the control scrolls, never the page.
+    useLayoutEffect(() => {
+        const root = group.current;
+        const selected = root?.querySelector('[aria-pressed="true"]');
+        if (!root || !selected || root.scrollWidth <= root.clientWidth)
+            return;
+        const outer = root.getBoundingClientRect();
+        const inner = selected.getBoundingClientRect();
+        if (inner.left < outer.left)
+            root.scrollLeft -= outer.left - inner.left;
+        else if (inner.right > outer.right)
+            root.scrollLeft += inner.right - outer.right;
+    }, [value]);
+    return (_jsx("div", { ref: group, ...componentRoot(name), className: cx("m-segmented", className), role: "group", "aria-label": label, children: options.map((option) => (_jsx("button", { type: "button", "aria-pressed": value === option.value, onClick: () => onChange(option.value), children: option.label }, option.value))) }));
 }
 /** A scrollable code sample in a figure; the caption names the figure. */
 export function CodeBlock({ code, label = "Code", className, }) {

package/dist/internal.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-import { type ItemGroup } from "./navigation.js";
+import { type HTMLAttributes, type RefObject, type ReactNode } from "react";
+import { type ItemGroup, type LinkItem } from "./navigation.js";
 import { type LinkAction } from "./primitives.js";
 import { type HeadingLevel } from "./heading.js";
 /**
@@ -36,6 +36,8 @@ export interface IntroProps {
     eyebrow?: string;
     /** Omit to render no heading. */
     title?: string;
+    /** A phrase in `title` to emphasise; its first occurrence renders as `<em>`. */
+    emphasis?: string;
     description?: string;
     /** Id for the heading, e.g. the target of the section's aria-labelledby. */
     id?: string;
@@ -49,7 +51,7 @@ export interface IntroProps {
  * in the same parent: React derives useId values from each child's position,
  * so keeping the slots flat keeps the ids of that content unchanged.
  */
-export declare function introSlots({ eyebrow, title, description, id, headingLevel, descriptionClassName, }: IntroProps): ReactNode[];
+export declare function introSlots({ eyebrow, title, emphasis, description, id, headingLevel, descriptionClassName, }: IntroProps): ReactNode[];
 /** The section intro as one element, for parents where nothing user-supplied follows it. */
 export declare function SectionIntro(props: IntroProps): import("react").JSX.Element;
 /** A row of link actions: the first primary, the rest secondary. */
@@ -367,6 +369,26 @@ export declare function LinkContent({ prefix, label, icon, count, marker, }: {
 }): import("react").FunctionComponentElement<import("react").FragmentProps>;
 /** A generated id that is safe in CSS selectors and URL fragments. */
 export declare function useDomId(prefix: string): string;
+/** Why an animation is not running; null while it plays. */
+export type PauseReason = "user" | "motion" | "hidden" | "offscreen" | null;
+/**
+ * Shared pause and resume for decorative motion. It plays only while the
+ * user has not paused it, reduced motion is not requested, the document is
+ * visible and `ref` is on screen. The user's pause is kept apart from the
+ * automatic reasons, so returning to the page never overrides it. `paused`
+ * and `onPausedChange` make the user's choice controlled, for example one
+ * state shared by several animations. Every listener is removed on unmount.
+ */
+export declare function usePlayback(ref: RefObject<Element | null>, { paused, onPausedChange, enabled, }: {
+    paused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    enabled?: boolean;
+}): {
+    reason: PauseReason;
+    reduced: boolean;
+    userPaused: boolean;
+    toggle: () => void;
+};
 /**
  * Next index for arrow, Home and End keys in a horizontal set (wrapping), or
  * null for any other key.
@@ -490,3 +512,17 @@ export declare function classedIntroSlots(props: IntroProps, titleClassName: str
  * or the one before it, searching up through the ancestors that remain.
  */
 export declare function focusAfterRemoval(element: HTMLElement): void;
+/** An item in a flyout panel; `current` marks the page you are on. */
+export type FlyoutItem = Pick<LinkItem, "label" | "href" | "description" | "icon" | "current">;
+/**
+ * A labelled group of links in a header that opens an anchored panel
+ * (MarketingHeader and Navbar). The group is marked current when one of its
+ * items is the current page.
+ */
+export declare function Flyout({ label, items, footer, layout, onNavigate, }: {
+    label: string;
+    items: FlyoutItem[];
+    footer?: LinkAction[];
+    layout?: "list" | "columns" | "full";
+    onNavigate: () => void;
+}): import("react").JSX.Element;

package/dist/internal.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Shared building blocks for the kit's components. Internal: nothing here is
 // exported from the package entry, so these can change without a release note.
-import { Fragment, createContext, createElement, useContext, useId, cloneElement, isValidElement, } from "react";
-import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import { Fragment, createContext, createElement, useContext, useEffect, useId, useState, cloneElement, isValidElement, } from "react";
+import { CloseButton, Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, } from "@headlessui/react";
 import { KitLink } from "./navigation.js";
+import { ChevronDown } from "./icons.js";
 import { ActionLink, Button } from "./primitives.js";
 import { headingTag } from "./heading.js";
 /**
@@ -46,14 +47,21 @@ export function cx(...classes) {
  * in the same parent: React derives useId values from each child's position,
  * so keeping the slots flat keeps the ids of that content unchanged.
  */
-export function introSlots({ eyebrow, title, description, id, headingLevel = 2, descriptionClassName = "m-section-description", }) {
+export function introSlots({ eyebrow, title, emphasis, description, id, headingLevel = 2, descriptionClassName = "m-section-description", }) {
     const Heading = headingTag(headingLevel);
     return [
         eyebrow && _jsx("p", { className: "m-eyebrow", children: eyebrow }),
-        title !== undefined && _jsx(Heading, { id: id, children: title }),
+        title !== undefined && (_jsx(Heading, { id: id, children: emphasise(title, emphasis) })),
         description && (_jsx("p", { className: descriptionClassName ?? undefined, children: description })),
     ];
 }
+/** `title` with the first occurrence of `phrase` in `<em>`; unchanged when absent. */
+function emphasise(title, phrase) {
+    const at = phrase ? title.indexOf(phrase) : -1;
+    if (!phrase || at < 0)
+        return title;
+    return (_jsxs(_Fragment, { children: [title.slice(0, at), _jsx("em", { className: "m-emphasis", children: phrase }), title.slice(at + phrase.length)] }));
+}
 /** The section intro as one element, for parents where nothing user-supplied follows it. */
 export function SectionIntro(props) {
     return _jsxs(_Fragment, { children: [...introSlots(props)] });
@@ -84,6 +92,58 @@ export function LinkContent({ prefix, label, icon, count, marker = false, }) {
 export function useDomId(prefix) {
     return prefix + useId().replace(/[^a-zA-Z0-9-]/g, "");
 }
+/**
+ * Shared pause and resume for decorative motion. It plays only while the
+ * user has not paused it, reduced motion is not requested, the document is
+ * visible and `ref` is on screen. The user's pause is kept apart from the
+ * automatic reasons, so returning to the page never overrides it. `paused`
+ * and `onPausedChange` make the user's choice controlled, for example one
+ * state shared by several animations. Every listener is removed on unmount.
+ */
+export function usePlayback(ref, { paused, onPausedChange, enabled = true, }) {
+    const [ownPaused, setOwnPaused] = useState(false);
+    const [reduced, setReduced] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [offscreen, setOffscreen] = useState(false);
+    const userPaused = paused ?? ownPaused;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const onMedia = () => setReduced(media.matches);
+        const onVisibility = () => setHidden(document.visibilityState === "hidden");
+        onMedia();
+        onVisibility();
+        media.addEventListener("change", onMedia);
+        document.addEventListener("visibilitychange", onVisibility);
+        const observer = ref.current && typeof IntersectionObserver !== "undefined"
+            ? new IntersectionObserver(([entry]) => setOffscreen(!entry.isIntersecting))
+            : null;
+        if (observer && ref.current)
+            observer.observe(ref.current);
+        return () => {
+            media.removeEventListener("change", onMedia);
+            document.removeEventListener("visibilitychange", onVisibility);
+            observer?.disconnect();
+        };
+    }, [enabled, ref]);
+    const reason = userPaused
+        ? "user"
+        : reduced
+            ? "motion"
+            : hidden
+                ? "hidden"
+                : offscreen
+                    ? "offscreen"
+                    : null;
+    const toggle = () => {
+        const next = !userPaused;
+        if (paused === undefined)
+            setOwnPaused(next);
+        onPausedChange?.(next);
+    };
+    return { reason, reduced, userPaused, toggle };
+}
 /**
  * Next index for arrow, Home and End keys in a horizontal set (wrapping), or
  * null for any other key.
@@ -271,3 +331,13 @@ export function focusAfterRemoval(element) {
         }
     });
 }
+/**
+ * A labelled group of links in a header that opens an anchored panel
+ * (MarketingHeader and Navbar). The group is marked current when one of its
+ * items is the current page.
+ */
+export function Flyout({ label, items, footer = [], layout = "list", onNavigate, }) {
+    const dataLayout = layout === "list" ? undefined : layout;
+    const current = items.some((item) => item.current);
+    return (_jsxs(Popover, { className: "m-flyout", "data-current": current || undefined, "data-layout": dataLayout, children: [_jsxs(PopoverButton, { className: "m-flyout-trigger", children: [label, _jsx(ChevronDown, {})] }), _jsxs(PopoverPanel, { anchor: "bottom", className: "m-flyout-panel", "data-layout": dataLayout, children: [_jsx("ul", { children: items.map((item, index) => (_jsx("li", { children: _jsxs(CloseButton, { as: KitLink, href: item.href, "aria-current": item.current ? "page" : undefined, onClick: onNavigate, children: [item.icon && (_jsx("span", { className: "m-flyout-icon", "aria-hidden": "true", children: item.icon })), _jsxs("span", { className: "m-flyout-text", children: [_jsx("strong", { children: item.label }), item.description && _jsx("span", { children: item.description })] })] }) }, `${item.label}:${item.href}:${index}`))) }), footer.length > 0 && (_jsx("div", { className: "m-flyout-footer", children: footer.map((link, index) => (_jsx(CloseButton, { as: KitLink, href: link.href, onClick: onNavigate, children: link.label }, `${link.label}:${link.href}:${index}`))) }))] })] }));
+}

package/dist/marketing.d.ts

@@ -1,17 +1,20 @@
-import { type IconLink, type ItemGroup, type LinkItem } from "./navigation.js";
+import { type IconLink, type ItemGroup } from "./navigation.js";
 import { type ReactNode } from "react";
 import { type LinkAction } from "./primitives.js";
 import { type SectionTone } from "./layout.js";
 import { type HeadingLevel } from "./heading.js";
-export type FlyoutItem = Pick<LinkItem, "label" | "href" | "description" | "icon">;
+import { type FlyoutItem } from "./internal.js";
+export type { FlyoutItem } from "./internal.js";
 /** A header link, or a labelled group that opens a flyout panel. */
 export type HeaderLink = LinkAction | (ItemGroup<FlyoutItem> & {
     footer?: LinkAction[];
     /** list: one column. columns: a wider panel in two columns. full: as wide as the viewport allows, up to four columns. */
     layout?: "list" | "columns" | "full";
 });
-export declare function MarketingHeader({ brand, homeHref, logo, links, action, controls, layout, mobileMenu, className, id, }: {
+export declare function MarketingHeader({ brand, tagline, homeHref, logo, links, action, controls, layout, mobileMenu, className, id, }: {
     brand: string;
+    /** A short descriptor beside the wordmark, outside the home link. Hidden on narrow screens. */
+    tagline?: string;
     logo?: ReactNode;
     homeHref?: string;
     /** Links, or groups of items that open a flyout panel. */
@@ -25,16 +28,37 @@ export declare function MarketingHeader({ brand, homeHref, logo, links, action,
     className?: string;
     id?: string;
 }): import("react").JSX.Element;
-export declare function Hero({ id, className, eyebrow, title, description, actions, children, layout, headingLevel, background, images, tone, }: {
+/**
+ * A public page: the header, a main region that grows to fill the viewport, and
+ * the footer. Content is never clipped; a longer page simply scrolls.
+ */
+export declare function MarketingPage({ header, footer, children, align, id, className, }: {
+    /** Usually a MarketingHeader. */
+    header?: ReactNode;
+    /** Usually a Footer. */
+    footer?: ReactNode;
+    children: ReactNode;
+    /** start: content from the top. center: content centred in the space between header and footer, for a single hero. */
+    align?: "start" | "center";
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Hero({ id, className, eyebrow, title, emphasis, description, actions, note, children, layout, wide, headingLevel, background, images, tone, }: {
     id?: string;
     className?: string;
     eyebrow?: string;
     title: string;
+    /** A phrase in the title to emphasise. Its first occurrence renders as `<em>` inside the one heading; a phrase not in the title is ignored. */
+    emphasis?: string;
     description: string;
     actions?: LinkAction[];
+    /** Short supporting content below the actions, such as a note or a Notice. */
+    note?: ReactNode;
     children?: ReactNode;
     /** center: copy above the preview. split: copy beside the preview. angled: copy beside an image that fills the end half to the edge, cut on a slant (pass one img or video as children). */
     layout?: "center" | "split" | "angled";
+    /** Split only: the column that takes more of the width. Omitted, the columns are even. */
+    wide?: "copy" | "preview";
     headingLevel?: HeadingLevel;
     /** Decorative full-cover image or video behind the copy. The hero switches to the inverse tone with a scrim so text keeps its contrast. */
     background?: ReactNode;
@@ -194,18 +218,18 @@ export declare function Footer({ id, className, brand, logo, description, note,
     className?: string;
     brand: string;
     logo?: ReactNode;
-    description: string;
+    description?: string;
     note?: ReactNode;
-    /** Link columns; each label is the column's visible heading and its navigation name. Centred, the label only names the navigation. */
-    columns: ItemGroup<LinkAction>[];
+    /** Link columns; each label is the column's visible heading and its navigation name. Centred or inline, the label only names the navigation. */
+    columns?: ItemGroup<LinkAction>[];
     copyright: string;
     legal?: LinkAction[];
     /** Level of the column headings. */
     itemHeadingLevel?: HeadingLevel;
     /** Social profiles, usually icon-only; each label names its link. */
     social?: IconLink[];
-    /** columns: the brand beside headed link columns. center: brand, a row of links and social links, all centred. */
-    layout?: "columns" | "center";
+    /** columns: the brand beside headed link columns. center: brand, a row of links and social links, all centred. inline: one compact row of brand, notes, links and copyright that wraps in reading order. */
+    layout?: "columns" | "center" | "inline";
     /** A signup row above the copyright, usually a Newsletter; the footer removes its section padding. */
     newsletter?: ReactNode;
 }): import("react").JSX.Element;