@tonycodes-ui/mortar 0.11.0 → 0.13.0

package/src/internal.tsx

@@ -5,14 +5,26 @@ import {
   createContext,
   createElement,
   useContext,
+  useEffect,
   useId,
+  useState,
   type HTMLAttributes,
+  type RefObject,
   type ReactNode,
   cloneElement,
   isValidElement,
 } from "react";
-import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
-import { KitLink, type ItemGroup } from "./navigation.js";
+import {
+  CloseButton,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+} from "@headlessui/react";
+import { KitLink, type ItemGroup, type LinkItem } from "./navigation.js";
+import { ChevronDown } from "./icons.js";
 import { ActionLink, Button, type LinkAction } from "./primitives.js";
 import { headingTag, type HeadingLevel } from "./heading.js";
 
@@ -71,6 +83,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;
@@ -87,6 +101,7 @@ export interface IntroProps {
 export function introSlots({
   eyebrow,
   title,
+  emphasis,
   description,
   id,
   headingLevel = 2,
@@ -95,12 +110,26 @@ export function introSlots({
   const Heading = headingTag(headingLevel);
   return [
     eyebrow && <p className="m-eyebrow">{eyebrow}</p>,
-    title !== undefined && <Heading id={id}>{title}</Heading>,
+    title !== undefined && (
+      <Heading id={id}>{emphasise(title, emphasis)}</Heading>
+    ),
     description && (
       <p className={descriptionClassName ?? undefined}>{description}</p>
     ),
   ];
 }
+/** `title` with the first occurrence of `phrase` in `<em>`; unchanged when absent. */
+function emphasise(title: string, phrase?: string): ReactNode {
+  const at = phrase ? title.indexOf(phrase) : -1;
+  if (!phrase || at < 0) return title;
+  return (
+    <>
+      {title.slice(0, at)}
+      <em className="m-emphasis">{phrase}</em>
+      {title.slice(at + phrase.length)}
+    </>
+  );
+}
 /** The section intro as one element, for parents where nothing user-supplied follows it. */
 export function SectionIntro(props: IntroProps) {
   return <>{...introSlots(props)}</>;
@@ -210,6 +239,72 @@ export function useDomId(prefix: string) {
   return prefix + useId().replace(/[^a-zA-Z0-9-]/g, "");
 }
 
+/** 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 function usePlayback(
+  ref: RefObject<Element | null>,
+  {
+    paused,
+    onPausedChange,
+    enabled = true,
+  }: {
+    paused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    enabled?: boolean;
+  },
+) {
+  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: PauseReason = 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.
@@ -612,3 +707,85 @@ export function focusAfterRemoval(element: HTMLElement) {
     }
   });
 }
+
+/** 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 function Flyout({
+  label,
+  items,
+  footer = [],
+  layout = "list",
+  onNavigate,
+}: {
+  label: string;
+  items: FlyoutItem[];
+  footer?: LinkAction[];
+  layout?: "list" | "columns" | "full";
+  onNavigate: () => void;
+}) {
+  const dataLayout = layout === "list" ? undefined : layout;
+  const current = items.some((item) => item.current);
+  return (
+    <Popover
+      className="m-flyout"
+      data-current={current || undefined}
+      data-layout={dataLayout}
+    >
+      <PopoverButton className="m-flyout-trigger">
+        {label}
+        <ChevronDown />
+      </PopoverButton>
+      {/* Anchored panels render in a portal, so headers inside clipped containers never cut them off. */}
+      <PopoverPanel
+        anchor="bottom"
+        className="m-flyout-panel"
+        data-layout={dataLayout}
+      >
+        <ul>
+          {items.map((item, index) => (
+            <li key={`${item.label}:${item.href}:${index}`}>
+              <CloseButton
+                as={KitLink}
+                href={item.href}
+                aria-current={item.current ? "page" : undefined}
+                onClick={onNavigate}
+              >
+                {item.icon && (
+                  <span className="m-flyout-icon" aria-hidden="true">
+                    {item.icon}
+                  </span>
+                )}
+                <span className="m-flyout-text">
+                  <strong>{item.label}</strong>
+                  {item.description && <span>{item.description}</span>}
+                </span>
+              </CloseButton>
+            </li>
+          ))}
+        </ul>
+        {footer.length > 0 && (
+          <div className="m-flyout-footer">
+            {footer.map((link, index) => (
+              <CloseButton
+                as={KitLink}
+                key={`${link.label}:${link.href}:${index}`}
+                href={link.href}
+                onClick={onNavigate}
+              >
+                {link.label}
+              </CloseButton>
+            ))}
+          </div>
+        )}
+      </PopoverPanel>
+    </Popover>
+  );
+}

package/src/marketing.css

@@ -24,6 +24,21 @@
     font-weight: var(--m-weight-bold);
     letter-spacing: var(--m-tracking-heading);
   }
+  /* A short descriptor beside the wordmark, outside the home link. */
+  .m-brand-lockup {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+  .m-brand-tagline {
+    max-width: 28ch;
+    padding-left: 12px;
+    border-left: 1px solid var(--m-line);
+    color: var(--m-muted);
+    font-size: 13px;
+    line-height: 1.3;
+  }
   .m-marketing-header nav {
     display: flex;
     gap: 22px;
@@ -192,7 +207,8 @@
     grid-column: 1;
     grid-row: 1;
   }
-  .m-marketing-header[data-layout="center"] > .m-brand {
+  .m-marketing-header[data-layout="center"] > .m-brand,
+  .m-marketing-header[data-layout="center"] > .m-brand-lockup {
     grid-column: 2;
     grid-row: 1;
   }
@@ -253,7 +269,8 @@
     .m-marketing-header[data-layout="center"] {
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
-    .m-marketing-header[data-layout="center"] > .m-brand {
+    .m-marketing-header[data-layout="center"] > .m-brand,
+    .m-marketing-header[data-layout="center"] > .m-brand-lockup {
       justify-self: center;
     }
     .m-marketing-header[data-layout="center"] > .m-actions .m-button {
@@ -274,6 +291,32 @@
     .m-flyout-panel[data-layout="columns"] ul {
       grid-template-columns: minmax(0, 1fr);
     }
+    .m-brand-tagline {
+      display: none;
+    }
+  }
+
+  /* == MarketingPage == */
+  /* Header, main and footer fill the viewport; main grows, nothing is clipped. */
+  .m-marketing-page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+  /* Header, sections and footer centre themselves with auto margins, which in a
+     flex column would shrink them to their content; keep them full width. */
+  .m-marketing-page > *,
+  .m-marketing-page[data-align="center"] > .m-marketing-main > * {
+    width: 100%;
+  }
+  .m-marketing-main {
+    flex: 1 0 auto;
+  }
+  .m-marketing-page[data-align="center"] > .m-marketing-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 
   /* == Banner == */
@@ -591,6 +634,30 @@
   .m-hero-split .m-section-title {
     font-size: clamp(40px, 5vw, 64px);
   }
+  /* Beside a preview the copy is start-aligned: no auto margins, which would
+     centre the description inside a copy column wider than its max width. */
+  .m-hero-split .m-hero-description {
+    margin-inline: 0;
+  }
+  .m-hero-split[data-wide="copy"] {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  }
+  .m-hero-split[data-wide="preview"] {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  }
+  /* An emphasised phrase in the title: the brand's text-safe link colour. */
+  .m-hero .m-emphasis {
+    font-style: normal;
+    color: var(--m-link);
+  }
+  .m-hero:is([data-background], [data-tone="accent"]) .m-emphasis {
+    color: inherit;
+  }
+  .m-hero-note {
+    margin-top: 20px;
+    color: var(--m-muted);
+    font-size: 14px;
+  }
   .m-hero-preview {
     margin-top: 48px;
     text-align: left;
@@ -694,6 +761,7 @@
   }
   @media (max-width: 900px) {
     .m-hero-split,
+    .m-hero-split[data-wide],
     .m-feature-section,
     .m-faq {
       grid-template-columns: minmax(0, 1fr);
@@ -1893,6 +1961,41 @@
     text-align: center;
     margin-top: 40px;
   }
+  /* Footer: one compact row that wraps in reading order. */
+  .m-footer[data-layout="inline"] {
+    padding-block: 24px;
+    border-top: 1px solid var(--m-line);
+  }
+  .m-footer-inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 24px;
+    color: var(--m-muted);
+    font-size: 13px;
+  }
+  .m-footer-inline .m-brand {
+    font-size: 14px;
+    color: var(--m-ink);
+  }
+  .m-footer-inline p {
+    margin: 0;
+  }
+  .m-footer-inline > :is(nav, div) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 20px;
+  }
+  .m-footer-inline a {
+    color: var(--m-muted);
+    text-decoration: none;
+  }
+  .m-footer-inline a:hover {
+    color: var(--m-ink);
+  }
+  .m-footer-inline > .m-icon-links {
+    margin: 0;
+  }
   @media (max-width: 900px) {
     .m-footer-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2385,6 +2488,82 @@
     background: var(--m-primary);
     color: var(--m-on-primary);
   }
+
+  /* == NetworkIllustration == */
+  /* Nodes and connections from data; signals travel along connections. Every
+     colour is a token, so the drawing follows the brand and appearance. */
+  .m-network {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .m-network svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+  .m-network-link {
+    stroke: var(--m-line-strong);
+    stroke-width: 1.5;
+    /* Lines keep their width however large the drawing is shown. */
+    vector-effect: non-scaling-stroke;
+  }
+  /* The outline is the strong line (3:1) whatever the fill, so nodes stay visible. */
+  .m-network-node {
+    fill: var(--m-surface);
+    stroke: var(--m-line-strong);
+    stroke-width: 1.5;
+    vector-effect: non-scaling-stroke;
+  }
+  .m-network-node[data-tone="accent"] {
+    fill: var(--m-accent);
+  }
+  .m-network-label {
+    fill: var(--m-secondary);
+    font-size: 12px;
+  }
+  .m-network-signal {
+    fill: var(--m-accent);
+    translate: var(--m-signal-from);
+    animation: m-network-signal 3s linear infinite;
+  }
+  .m-network[data-paused] .m-network-signal {
+    animation-play-state: paused;
+  }
+  /* Below the drawing, never over it, so no node is covered at any size. */
+  .m-network-toggle {
+    align-self: flex-end;
+    padding: 4px 10px;
+    border: 1px solid var(--m-line);
+    border-radius: var(--m-radius-sm);
+    background: var(--m-surface);
+    color: var(--m-secondary);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .m-network-toggle:hover {
+    color: var(--m-ink);
+  }
+  /* Before scripts run, and whenever reduced motion is requested, show the
+     static drawing; the script then stops rendering the signals. */
+  @media (prefers-reduced-motion: reduce) {
+    .m-network-signal {
+      display: none;
+    }
+    .m-network-toggle {
+      display: none;
+    }
+  }
+}
+@keyframes m-network-signal {
+  from {
+    translate: var(--m-signal-from);
+  }
+  to {
+    translate: var(--m-signal-to);
+  }
 }
 @keyframes m-chat-dot {
   0%,