@tonycodes-ui/mortar 0.11.0 → 0.12.0

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

@@ -7,7 +7,7 @@ export { AppShell, PageHeading, MetricGroup, DataTable, Table, Pagination, Setti
 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 { 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/internal.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type RefObject, type ReactNode } from "react";
 import { type ItemGroup } 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.

package/dist/internal.js

@@ -1,7 +1,7 @@
 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 { Fragment, createContext, createElement, useContext, useEffect, useId, useState, cloneElement, isValidElement, } from "react";
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
 import { KitLink } from "./navigation.js";
 import { ActionLink, Button } from "./primitives.js";
@@ -46,14 +46,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 +91,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.

package/dist/marketing.d.ts

@@ -10,8 +10,10 @@ export type HeaderLink = LinkAction | (ItemGroup<FlyoutItem> & {
     /** 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 +27,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 +217,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;

package/dist/marketing.js

@@ -13,13 +13,15 @@ function Flyout({ label, items, footer = [], layout = "list", onNavigate, }) {
     const dataLayout = layout === "list" ? undefined : layout;
     return (_jsxs(Popover, { className: "m-flyout", "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, 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}`))) }))] })] }));
 }
-export function MarketingHeader({ brand, homeHref = "/", logo, links, action, controls, layout = "inline", mobileMenu = "inline", className, id, }) {
+export function MarketingHeader({ brand, tagline, homeHref = "/", logo, links, action, controls, layout = "inline", mobileMenu = "inline", className, id, }) {
     const [open, setOpen] = useState(false);
     // Generated so two headers on one page keep distinct, valid references.
     const navId = useDomId("m-marketing-nav");
     const panel = mobileMenu === "panel";
     const close = () => setOpen(false);
-    const brandLink = (_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }));
+    const homeLink = (_jsxs(KitLink, { className: "m-brand", href: homeHref, children: [_jsx(BrandMark, { logo: logo }), brand] }));
+    // The tagline sits outside the link so the link's name stays the brand.
+    const brandLink = tagline ? (_jsxs("div", { className: "m-brand-lockup", children: [homeLink, _jsx("span", { className: "m-brand-tagline", children: tagline })] })) : (homeLink);
     const menuButton = (_jsx(Button, { variant: "ghost", className: "m-menu-trigger", "aria-haspopup": panel ? "dialog" : undefined, "aria-expanded": open, "aria-controls": panel ? undefined : navId, onClick: () => setOpen(!open), children: "Menu" }));
     const nav = (_jsx("nav", { id: navId, "aria-label": "Primary", "data-open": (open && !panel) || undefined, children: links.map((link, index) => "items" in link ? (_jsx(Flyout, { label: link.label, items: link.items, footer: link.footer, layout: link.layout, onNavigate: close }, `${link.label}:flyout:${index}`)) : (_jsx(KitLink, { href: link.href, onClick: close, children: link.label }, `${link.label}:${link.href}:${index}`))) }));
     const actions = (controls || action) && (_jsxs(_Fragment, { children: [controls, action && _jsx(ActionLink, { ...action })] }));
@@ -29,8 +31,15 @@ export function MarketingHeader({ brand, homeHref = "/", logo, links, action, co
 function PanelLinks({ links, onNavigate, }) {
     return (_jsx("nav", { "aria-label": "Primary", className: "m-marketing-panel-nav", children: links.map((link, index) => "items" in link ? (_jsxs("details", { children: [_jsxs("summary", { children: [link.label, _jsx(ChevronDown, {})] }), [...link.items, ...(link.footer ?? [])].map((item, i) => (_jsx(KitLink, { href: item.href, onClick: onNavigate, children: item.label }, `${item.label}:${item.href}:${i}`)))] }, `${link.label}:group:${index}`)) : (_jsx(KitLink, { href: link.href, onClick: onNavigate, children: link.label }, `${link.label}:${link.href}:${index}`))) }));
 }
-export function Hero({ id, className, eyebrow, title, description, actions = [], children, layout = "center", headingLevel = 1, background, images = [], tone = "default", }) {
-    return (_jsxs("section", { id: id, className: cx("m-hero", `m-hero-${layout}`, className), ...componentRoot("Hero"), "data-background": background ? true : undefined, "data-tone": background ? "inverse" : sectionTone(tone), children: [background && (_jsx("div", { className: "m-hero-background", "aria-hidden": "true", children: background })), _jsxs("div", { children: [_jsx(TitledIntro, { eyebrow: eyebrow, title: title, headingLevel: headingLevel }), _jsx("p", { className: "m-hero-description", children: description }), _jsx(ActionLinks, { actions: actions })] }), images.length > 0 && (_jsx("div", { className: "m-hero-tiles", children: images.map((image, index) => (_jsx("div", { children: image }, index))) })), children && _jsx("div", { className: "m-hero-preview", children: children })] }));
+/**
+ * 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 function MarketingPage({ header, footer, children, align = "start", id, className, }) {
+    return (_jsxs("div", { id: id, className: cx("m-marketing-page", className), ...componentRoot("MarketingPage"), "data-align": align === "center" ? "center" : undefined, children: [header, _jsx("main", { className: "m-marketing-main", children: children }), footer] }));
+}
+export function Hero({ id, className, eyebrow, title, emphasis, description, actions = [], note, children, layout = "center", wide, headingLevel = 1, background, images = [], tone = "default", }) {
+    return (_jsxs("section", { id: id, className: cx("m-hero", `m-hero-${layout}`, className), ...componentRoot("Hero"), "data-wide": layout === "split" ? wide : undefined, "data-background": background ? true : undefined, "data-tone": background ? "inverse" : sectionTone(tone), children: [background && (_jsx("div", { className: "m-hero-background", "aria-hidden": "true", children: background })), _jsxs("div", { children: [_jsx(TitledIntro, { eyebrow: eyebrow, title: title, emphasis: emphasis, headingLevel: headingLevel }), _jsx("p", { className: "m-hero-description", children: description }), _jsx(ActionLinks, { actions: actions }), note && _jsx("div", { className: "m-hero-note", children: note })] }), images.length > 0 && (_jsx("div", { className: "m-hero-tiles", children: images.map((image, index) => (_jsx("div", { children: image }, index))) })), children && _jsx("div", { className: "m-hero-preview", children: children })] }));
 }
 export function FeatureGrid({ id, className, eyebrow, title, description, items, marker = "auto", columns, tone = "default", headingLevel = 2, }) {
     const ItemHeading = headingTag(childLevel(headingLevel));
@@ -115,13 +124,17 @@ export function CallToAction({ id, className, title, description, actions, tone
     const copy = (_jsxs(_Fragment, { children: [_jsx(TitledIntro, { title: title, description: description, descriptionClassName: null, headingLevel: headingLevel }), _jsx(ActionLinks, { actions: actions })] }));
     return (_jsx("section", { id: id, className: cx("m-cta", className), ...componentRoot("CallToAction"), "data-tone": sectionTone(tone), "data-layout": media ? "split" : undefined, children: media ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "m-cta-copy", children: copy }), _jsx("div", { className: "m-cta-media", children: media })] })) : (copy) }));
 }
-export function Footer({ id, className, brand, logo, description, note, columns, copyright, legal = [], itemHeadingLevel = 2, social = [], layout = "columns", newsletter, }) {
+export function Footer({ id, className, brand, logo, description, note, columns = [], copyright, legal = [], itemHeadingLevel = 2, social = [], layout = "columns", newsletter, }) {
     const Heading = headingTag(itemHeadingLevel);
     const center = layout === "center";
-    const identity = (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "m-brand", children: [_jsx(BrandMark, { logo: logo }), brand] }), _jsx("p", { children: description }), note && _jsx("p", { children: note })] }));
+    const inline = layout === "inline";
+    const identity = (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "m-brand", children: [_jsx(BrandMark, { logo: logo }), brand] }), description && _jsx("p", { children: description }), note && _jsx("p", { children: note })] }));
     const socialLinks = social.length > 0 && (_jsx(IconLinks, { label: "Social media", links: social }));
-    const navs = columns.map((column) => (_jsxs("nav", { "aria-label": column.label, children: [!center && _jsx(Heading, { children: column.label }), column.items.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`)))] }, column.label)));
-    return (_jsxs("footer", { id: id, className: cx("m-footer", className), ...componentRoot("Footer"), "data-layout": center ? "center" : undefined, children: [center ? (_jsxs("div", { className: "m-footer-center", children: [identity, navs, socialLinks] })) : (_jsxs("div", { className: "m-footer-grid", children: [_jsxs("div", { children: [identity, socialLinks] }), navs] })), newsletter && _jsx("div", { className: "m-footer-newsletter", children: newsletter }), _jsxs("div", { className: "m-footer-bottom", children: [_jsx("span", { children: copyright }), _jsx("div", { children: legal.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`))) })] })] }));
+    const navs = columns.map((column) => (_jsxs("nav", { "aria-label": column.label, children: [!center && !inline && _jsx(Heading, { children: column.label }), column.items.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`)))] }, column.label)));
+    const legalLinks = (_jsx("div", { children: legal.map((link, index) => (_jsx(KitLink, { href: link.href, children: link.label }, `${link.label}:${link.href}:${index}`))) }));
+    if (inline)
+        return (_jsxs("footer", { id: id, className: cx("m-footer", className), ...componentRoot("Footer"), "data-layout": "inline", children: [_jsxs("div", { className: "m-footer-inline", children: [identity, navs, socialLinks, _jsx("span", { children: copyright }), legal.length > 0 && legalLinks] }), newsletter && _jsx("div", { className: "m-footer-newsletter", children: newsletter })] }));
+    return (_jsxs("footer", { id: id, className: cx("m-footer", className), ...componentRoot("Footer"), "data-layout": center ? "center" : undefined, children: [center ? (_jsxs("div", { className: "m-footer-center", children: [identity, navs, socialLinks] })) : (_jsxs("div", { className: "m-footer-grid", children: [_jsxs("div", { children: [identity, socialLinks] }), navs] })), newsletter && _jsx("div", { className: "m-footer-newsletter", children: newsletter }), _jsxs("div", { className: "m-footer-bottom", children: [_jsx("span", { children: copyright }), legalLinks] })] }));
 }
 /** Intro band for inner pages (about, pricing, careers), with optional links and stats. */
 export function HeaderSection({ id, className, eyebrow, title, description, links = [], stats = [], tone = "default", align = "start", headingLevel = 1, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonycodes-ui/mortar",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Mortar: a shared design foundation, application and marketing UI for React and Tailwind.",
   "type": "module",
   "files": [

package/src/illustration.tsx

@@ -0,0 +1,169 @@
+import { useRef, type CSSProperties } from "react";
+import { componentRoot, cx, useDomId, usePlayback } from "./internal.js";
+
+/** 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;
+}
+
+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,
+}: {
+  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;
+}) {
+  const ref = useRef<HTMLDivElement>(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 (
+    <div
+      ref={ref}
+      id={id}
+      className={cx("m-network", className)}
+      {...componentRoot("NetworkIllustration")}
+      data-motion={motion === "static" ? "static" : undefined}
+      data-paused={animated ? (reason ?? undefined) : undefined}
+    >
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        {...(informative
+          ? {
+              role: "img",
+              "aria-labelledby": titleId,
+              "aria-describedby": description ? descId : undefined,
+            }
+          : { "aria-hidden": true, focusable: false })}
+      >
+        {informative && <title id={titleId}>{label}</title>}
+        {informative && description && <desc id={descId}>{description}</desc>}
+        {links.map((link, index) => (
+          <line
+            key={`${link.from}:${link.to}:${index}`}
+            className="m-network-link"
+            x1={link.a.x}
+            y1={link.a.y}
+            x2={link.b.x}
+            y2={link.b.y}
+          />
+        ))}
+        {animated &&
+          !reduced &&
+          carriers.map((link, index) => {
+            const time = link.duration ?? duration;
+            const delay = link.delay ?? -((index * time) / carriers.length);
+            return (
+              <circle
+                key={`${link.from}:${link.to}:${index}`}
+                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,
+                  } as CSSProperties
+                }
+              />
+            );
+          })}
+        {nodes.map((node) => (
+          <circle
+            key={node.id}
+            className="m-network-node"
+            cx={node.x}
+            cy={node.y}
+            r={NODE_RADIUS}
+            data-tone={node.tone === "accent" ? "accent" : undefined}
+          />
+        ))}
+        {nodes.map(
+          (node) =>
+            node.label && (
+              <text
+                key={node.id}
+                className="m-network-label"
+                x={node.x}
+                y={node.y + NODE_RADIUS + 16}
+                textAnchor="middle"
+              >
+                {node.label}
+              </text>
+            ),
+        )}
+      </svg>
+      {animated && !reduced && (
+        <button type="button" className="m-network-toggle" onClick={toggle}>
+          {userPaused ? "Play animation" : "Pause animation"}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -94,6 +94,7 @@ export type {
 } from "./auth.js";
 export {
   MarketingHeader,
+  MarketingPage,
   Hero,
   FeatureGrid,
   FeatureSection,
@@ -228,3 +229,5 @@ export type {
 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";