@terpjs/react-core 0.8.0 → 0.10.0

package/src/Authorized.tsx

@@ -8,14 +8,47 @@ export function useCan(action: Action): boolean {
   return useAuth().can(action);
 }
 
+/**
+ * The caller's effective permission names, from `GET /me` (ADR 0096).
+ *
+ * `useCan` compares role *rank*, which is all the wire used to carry. A screen whose write
+ * needs a **named** grant (`definitions.publish`) therefore had nothing to ask: it hid by
+ * rank as a proxy and handled the 403 anyway — showing a button it knew might fail, or
+ * hiding one the user was entitled to. This is the same set the server's guard enforces,
+ * projected for display.
+ *
+ * Empty when signed out, and empty for an app that mounts no grant capability (it has no
+ * named permissions). A *display* input only: the server re-checks every request, and a
+ * client that treats this as authority has moved the gate to the wrong side of the wire.
+ */
+export function usePermissions(): readonly string[] {
+  return useAuth().currentUser()?.permissions ?? [];
+}
+
+/** Whether the current user holds the named permission grant (the UI gate). */
+export function useHasPermission(permission: string): boolean {
+  return usePermissions().includes(permission);
+}
+
 export interface AuthorizedProps {
   action: Action;
   children: ReactNode;
+  /**
+   * Also require this named permission grant.
+   *
+   * Both must pass, which is deliberately what the server does: a `Policy` carrying a
+   * `Permission` enforces the permission's role floor **and** the grant, so a UI that
+   * checked only one would disagree with the endpoint in one direction or the other.
+   */
+  permission?: string;
   /** Rendered when the user may not perform `action` (default: nothing). */
   fallback?: ReactNode;
 }
 
 /** Render `children` only when the current user may perform `action`, else `fallback`. */
-export function Authorized({ action, children, fallback = null }: AuthorizedProps) {
-  return <>{useCan(action) ? children : fallback}</>;
+export function Authorized({ action, permission, children, fallback = null }: AuthorizedProps) {
+  const allowedByRank = useCan(action);
+  const permissions = usePermissions();
+  const allowed = allowedByRank && (permission === undefined || permissions.includes(permission));
+  return <>{allowed ? children : fallback}</>;
 }

package/src/Field.test.tsx

@@ -22,6 +22,36 @@ describe("Field", () => {
     expect(screen.getByText("required")).toBeInTheDocument();
   });
 
+  it("exposes the error as an alert, and nothing else in the field", () => {
+    // `aria-describedby` is read when focus reaches the control. That covers an error which was
+    // already there and covers nothing about one that arrives on submit, when focus has left the
+    // field and the only thing that changed is a span nobody is pointed at. The two channels fire
+    // at different moments, and a submit-time rejection only has the second one.
+    //
+    // The length assertion is the half with teeth: `role="alert"` on the hint as well would
+    // satisfy a bare `getByRole` while training the user to ignore the channel the error needs.
+    // Mutation: drop `role="alert"` from the span and the lookup finds nothing.
+    render(
+      <Field label="Email" hint="we never share it" error="required">
+        <Input defaultValue="" />
+      </Field>,
+    );
+    expect(screen.getAllByRole("alert")).toHaveLength(1);
+    expect(screen.getByRole("alert")).toHaveTextContent("required");
+  });
+
+  it("raises no alert when there is nothing wrong", () => {
+    // An alert that is present on every render is an alert that means nothing. The span is
+    // conditional, so it enters the accessibility tree exactly when the error appears, which is
+    // the event the role exists to report.
+    render(
+      <Field label="Email" hint="we never share it">
+        <Input defaultValue="" />
+      </Field>,
+    );
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
   it("renders no error node when error is null", () => {
     render(
       <Field label="Name" error={null}>

package/src/Field.tsx

@@ -31,6 +31,14 @@ export interface FieldProps {
  * declares either keeps its own value; the field adds to `aria-describedby` rather than replacing
  * it. `Input`, `Select`, `Textarea` and `Combobox` all spread their props onto the DOM element, so
  * the attributes land where assistive tech reads them.
+ *
+ * The error also carries `role="alert"`, and `aria-describedby` is why it has to. A description is
+ * read when focus reaches the control, which covers an error that was already there and covers
+ * nothing about one that appears on submit — by then focus has left the field, or the button, and
+ * the only thing that changed is a span nobody is pointed at. The two are not redundant: they
+ * announce at different moments, and a submit-time rejection only has the second one. Because the
+ * span is conditional, it enters the accessibility tree exactly when the error appears, which is
+ * the event `alert` exists to report.
  */
 export function Field({ label, children, error, hint }: FieldProps) {
   const resolve = useUiText();
@@ -39,17 +47,35 @@ export function Field({ label, children, error, hint }: FieldProps) {
   const hintId = hint !== undefined ? `${baseId}-hint` : undefined;
   const errorId = hasError ? `${baseId}-error` : undefined;
   const described = [hintId, errorId].filter((id) => id !== undefined).join(" ");
+  const labelId = `${baseId}-label`;
 
-  // Only a single element child can be described — which is the documented contract ("the
-  // control"). Anything else is passed through untouched rather than guessed at.
-  const control = described.length > 0 && isValidElement<{
+  // Only a single element child can be named and described — which is the documented contract
+  // ("the control"). Anything else is passed through untouched rather than guessed at.
+  const control = isValidElement<{
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
   }>(children)
     ? cloneElement(children, {
-        "aria-describedby": [children.props["aria-describedby"], described]
-          .filter((id) => id !== undefined && id !== "")
-          .join(" "),
+        // The control is named by the label TEXT, not by the label element's subtree, and that
+        // distinction is the whole reason this exists. A wrapping label takes its name from
+        // everything inside it, so a control that renders an adornment of its own — the password
+        // reveal is the first — hands its own button's name to the field: Chromium computes
+        // "Password Show password" for that input, which is a WCAG 2.5.3 failure and a sentence
+        // no voice-control user can see to say. Pointing at the span makes the name exact.
+        //
+        // A caller that named the control itself keeps their name; this never overrides one.
+        "aria-labelledby":
+          children.props["aria-label"] === undefined
+            ? (children.props["aria-labelledby"] ?? labelId)
+            : undefined,
+        "aria-describedby":
+          described.length > 0
+            ? [children.props["aria-describedby"], described]
+                .filter((id) => id !== undefined && id !== "")
+                .join(" ")
+            : children.props["aria-describedby"],
         "aria-invalid": children.props["aria-invalid"] ?? (hasError ? true : undefined),
       })
     : children;
@@ -57,7 +83,9 @@ export function Field({ label, children, error, hint }: FieldProps) {
   return (
     <div data-terp="field">
       <label data-terp="field-label">
-        <span data-terp="field-label-text">{resolve(label)}</span>
+        <span id={labelId} data-terp="field-label-text">
+          {resolve(label)}
+        </span>
         {control}
       </label>
       {hint !== undefined && (
@@ -66,7 +94,7 @@ export function Field({ label, children, error, hint }: FieldProps) {
         </span>
       )}
       {hasError && (
-        <span id={errorId} data-terp="field-error">
+        <span id={errorId} role="alert" data-terp="field-error">
           {error}
         </span>
       )}

package/src/FormPage.tsx

@@ -0,0 +1,54 @@
+import type { BreadcrumbItem } from "./Breadcrumbs";
+import { LayoutSlotContext } from "./layoutContract";
+import { Page } from "./Page";
+import type { PageProps } from "./Page";
+
+export interface FormPageProps extends Omit<PageProps, "breadcrumbs"> {
+  /**
+   * The layers this form sits under, outermost first — the list it was reached from, and
+   * anything above that.
+   *
+   * Required, and for the reason `DetailPage`'s is: a create or edit screen is always reached
+   * from somewhere, and a form with no way back is a dead end with unsaved work in it.
+   */
+  parents: readonly (BreadcrumbItem & { to: string })[];
+}
+
+/**
+ * The form archetype: one create-or-edit screen, reached from the collection it writes into.
+ *
+ * It is a `Page` with two things fixed. The frame is `measure="narrow"` by default — header
+ * included — because a form is a single column of controls and a Save button a screen-width
+ * from its last field is worse than one sitting over it. And the body slot admits the shape a
+ * form actually has rather than the shape a record screen has.
+ *
+ * **The body is a container, so `Field` is deliberately not admitted directly.** The slot takes
+ * the form container, plus `Grid` for a two-column arrangement inside a wide form, `Card` for a
+ * grouped section, `Divider` and `Text` between them, and the framework states.
+ *
+ * What that refusal does and does not buy is worth stating exactly, because the obvious claim is
+ * too strong. It keeps fields out of the top level, so a form body is always a container — which
+ * is the shape the archetype is for. It does **not** guarantee the form can be submitted: both
+ * halves of the contract match on `data-terp` markers, and `Stack` renders the same marker
+ * whether or not it was given `as="form"`. So `<Stack><Field/></Stack>` passes and is still
+ * unsubmittable by Enter. Closing that would mean a second marker for the form case, which is
+ * six more names describing the same DOM — the `Section` trade 4b already declined.
+ *
+ * It renders no element of its own — the slot context and `Page`, nothing between them, because
+ * a wrapper around the body would become the sole entry in `article.children` and fail every
+ * governed page closed (ADR 0079).
+ */
+export function FormPage({ parents, measure = "narrow", ...page }: FormPageProps) {
+  return (
+    <LayoutSlotContext.Provider value="FormPage">
+      {/* Spread FIRST, then the archetype's own props — `HubPage`'s order, not
+          `DetailPage`'s. `Omit<PageProps, "breadcrumbs">` removes the key from the type but not
+          from a runtime object, and a JSX spread gets no excess-property check: a wrapper
+          forwarding `{...props}` with a present-but-undefined `breadcrumbs` would otherwise
+          overwrite `parents` and silently drop the trail this archetype requires.
+          (`DetailPage` and `OverviewPage` still spread last. Same latent shape, pre-existing,
+          and left for a change that can re-record their baselines rather than this one.) */}
+      <Page {...page} breadcrumbs={parents} measure={measure} />
+    </LayoutSlotContext.Provider>
+  );
+}

package/src/LoginView.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { CSSProperties, FormEvent } from "react";
+import type { FormEvent } from "react";
 
 import { TerpMark } from "./icons";
 import { useAuth, useSso } from "./TerpProvider";
@@ -8,67 +8,6 @@ import { Button } from "./ui/Button";
 import { Input } from "./ui/Input";
 import type { SsoProvider } from "./sso";
 
-const pageStyle: CSSProperties = {
-  minHeight: "100vh",
-  display: "grid",
-  placeItems: "center",
-  padding: "var(--space-6)",
-  background: "var(--color-neutral-50)",
-  fontFamily: "var(--font-family-sans)",
-  color: "var(--color-neutral-900)",
-};
-
-const cardStyle: CSSProperties = {
-  width: "100%",
-  maxWidth: "24rem",
-  display: "grid",
-  gap: "var(--space-4)",
-  padding: "var(--space-6)",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  boxShadow: "var(--shadow-md)",
-};
-
-const brandStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  color: "var(--color-neutral-900)",
-};
-
-const brandTitleStyle: CSSProperties = {
-  margin: 0,
-  fontSize: "var(--font-size-xl)",
-  fontWeight: "var(--font-weight-bold)" as CSSProperties["fontWeight"],
-  letterSpacing: 0,
-};
-
-const formStyle: CSSProperties = { display: "grid", gap: "var(--space-3)" };
-
-const fullWidthStyle: CSSProperties = { width: "100%" };
-
-const separatorStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-xs)",
-  textTransform: "uppercase",
-  letterSpacing: "0.06em",
-};
-
-const separatorRuleStyle: CSSProperties = {
-  flex: 1,
-  borderTop: "1px solid var(--color-neutral-200)",
-};
-
-const errorStyle: CSSProperties = {
-  margin: 0,
-  color: "var(--color-status-danger)",
-  fontSize: "var(--font-size-sm)",
-};
-
 export interface LoginViewProps {
   /**
    * SSO providers to offer alongside the credentials form (ADR 0058). Each renders a
@@ -95,6 +34,19 @@ export interface DevCredentials {
  * The default signed-out screen: collects credentials and calls the auth session. Used by
  * {@link renderTerpApp}/`RequireAuth` unless an app supplies its own login view. Pass
  * {@link LoginViewProps.ssoProviders} to add SSO provider buttons under the form.
+ *
+ * It renders no inline styles: the full-viewport page, the card, the brand row, both button
+ * groups, the separator and the error line take their geometry and ink from the injected
+ * react-core sheet (ADR 0094).
+ *
+ * Two things here used to be worked around and are not any more, which is worth recording
+ * because the workarounds were both reasonable while they lasted. The buttons filled their
+ * group through a rule on the GROUP, because `Button` declares `width: fit-content` — a
+ * definite width, so a grid does not stretch them for free — and a prop for one internal
+ * caller was API the package did not need. `Button` has `fullWidth` now, so the rule retires
+ * and the four call sites say what they mean. And the submit button hand-rolled a busy state
+ * out of `disabled` plus a swapped label; `loading` is that state, and it adds the spinner and
+ * the `aria-busy` the hand-rolled version never had.
  */
 export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps = {}) {
   const auth = useAuth();
@@ -133,15 +85,18 @@ export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps
   const ssoError = sso.error !== null && sso.error !== undefined ? strings.ssoFailed : null;
 
   return (
-    <main style={pageStyle}>
-      <div style={cardStyle}>
-        <div style={brandStyle}>
+    <main data-terp="login-view">
+      <div data-terp="login-card">
+        <div data-terp="login-brand">
           <TerpMark />
-          <h1 style={brandTitleStyle}>{strings.signIn}</h1>
+          <h1 data-terp="login-title">{strings.signIn}</h1>
         </div>
-        <form style={formStyle} onSubmit={onSubmit}>
+        <form data-terp="login-form" onSubmit={onSubmit}>
           <Input
             type="email"
+            // Neither field declared an autocomplete token, so no password manager offered to
+            // fill or save this form — the one place in the framework where that matters most.
+            autoComplete="username"
             placeholder={strings.email}
             value={email}
             onChange={(event) => setEmail(event.target.value)}
@@ -149,20 +104,21 @@ export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps
           />
           <Input
             type="password"
+            autoComplete="current-password"
             placeholder={strings.password}
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             required
           />
-          <Button type="submit" disabled={busy} style={fullWidthStyle}>
+          <Button type="submit" fullWidth loading={busy}>
             {busy ? strings.signingIn : strings.signIn}
           </Button>
           {devCredentials ? (
             <Button
               type="button"
               variant="secondary"
+              fullWidth
               disabled={busy}
-              style={fullWidthStyle}
               onClick={() => {
                 setEmail(devCredentials.email);
                 setPassword(devCredentials.password);
@@ -175,19 +131,19 @@ export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps
         </form>
         {ssoProviders.length > 0 ? (
           <>
-            <div style={separatorStyle} aria-hidden="true">
-              <span style={separatorRuleStyle} />
+            <div data-terp="login-separator" aria-hidden="true">
+              <span data-terp="login-separator-rule" />
               <span>{strings.orSeparator}</span>
-              <span style={separatorRuleStyle} />
+              <span data-terp="login-separator-rule" />
             </div>
-            <div style={formStyle}>
+            <div data-terp="login-sso">
               {ssoProviders.map((provider) => (
                 <Button
                   key={provider.name}
                   type="button"
                   variant="secondary"
+                  fullWidth
                   disabled={busy}
-                  style={fullWidthStyle}
                   onClick={() => void onSso(provider)}
                 >
                   {`${strings.continueWith} ${provider.label ?? provider.name}`}
@@ -196,7 +152,11 @@ export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps
             </div>
           </>
         ) : null}
-        {error ?? ssoError ? <p style={errorStyle}>{error ?? ssoError}</p> : null}
+        {error ?? ssoError ? (
+          <p role="alert" data-terp="login-error">
+            {error ?? ssoError}
+          </p>
+        ) : null}
       </div>
     </main>
   );

package/src/ModuleNav.test.tsx

@@ -60,6 +60,32 @@ describe("ModuleNav", () => {
       "page",
     );
     expect(screen.getByRole("link", { name: "Overview" })).not.toHaveAttribute("aria-current");
+
+    // The styling key is data-active, and the point is that it is NOT the aria-current beside
+    // it: a router Link merges its own active props last, so that attribute has a second author.
+    //
+    // The divergence this comment used to describe is fixed (ADR 0097 §6, amended in 4e). Both
+    // authors now compute the same thing by construction rather than by coincidence. The
+    // component asks `activeNavPath` over the whole strip; the Link is pinned to
+    // `exact: true, includeSearch: false`, so the router volunteers `aria-current` only when the
+    // path equals the URL — the longest possible match, hence always the tab the predicate
+    // picked. It can agree or stay silent; it cannot name a different tab. Which is why the
+    // assertion below can now demand exactly one `aria-current` in the strip.
+    const active = screen.getByRole("link", { name: "Projects" });
+    const inactive = screen.getByRole("link", { name: "Overview" });
+    expect(active).toHaveAttribute("data-terp", "module-nav-link");
+    expect(active).toHaveAttribute("data-active", "true");
+    expect(inactive).toHaveAttribute("data-terp", "module-nav-link");
+    expect(inactive).not.toHaveAttribute("data-active");
+    expect(active.getAttribute("style")).toBeNull();
+    expect(inactive.getAttribute("style")).toBeNull();
+
+    // Exactly one, over the whole strip. Before 4e the Link was left prefix-matching, so at
+    // /tickets/projects the router added its own aria-current to the /tickets tab as well and a
+    // screen reader announced two current pages.
+    expect(
+      document.querySelectorAll('[data-terp="module-nav"] [aria-current="page"]'),
+    ).toHaveLength(1);
   });
 
   it("returns nothing for an empty tab list", () => {

package/src/ModuleNav.tsx

@@ -1,14 +1,24 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import type { CSSProperties } from "react";
 
+import { activeNavPath } from "./navActive";
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
 
 export interface ModuleNavTab {
   /** Display label. */
   label: UiText;
-  /** Router path for an exact sub-page route. */
+  /** Router path for the sub-page route. */
   to: string;
+  /**
+   * Match this tab's path exactly rather than as a segment-aligned prefix.
+   *
+   * The default is the prefix, so a tab stays current on the pages beneath it — a detail route
+   * under `/records/mapping` keeps "Mapping" lit instead of blanking the strip. Set this on a
+   * landing tab that also has siblings deeper in the same strip, where the prefix would keep it
+   * lit alongside them; the shared predicate resolves that case by longest match anyway, so this
+   * is for the narrower job of a tab owning only itself.
+   */
+  exact?: boolean;
 }
 
 export interface ModuleNavProps {
@@ -17,65 +27,62 @@ export interface ModuleNavProps {
   ariaLabel?: UiText;
 }
 
-const navStyle: CSSProperties = {
-  borderBottom: "1px solid var(--color-neutral-200)",
-};
-
-const listStyle: CSSProperties = {
-  listStyle: "none",
-  margin: 0,
-  padding: 0,
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "var(--space-3)",
-};
-
-const linkStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  padding: "var(--space-2) 0",
-  color: "var(--color-neutral-600)",
-  textDecoration: "none",
-  borderBottom: "2px solid transparent",
-};
-
-const activeLinkStyle: CSSProperties = {
-  color: "var(--color-neutral-900)",
-  borderBottomColor: "var(--color-fg-accent)",
-};
-
 /**
  * Secondary horizontal navigation for intra-module sub-pages.
  *
  * Each tab links to a real TanStack Router route so sub-pages keep their own URL,
  * lazy loading, and back-button behavior. The active tab is matched exactly.
+ *
+ * It renders no inline styles: the strip, the list and the links take their geometry and
+ * ink from the injected react-core sheet (ADR 0094). The active tab is styled from
+ * `data-active`, which this component alone writes, rather than from the `aria-current` it
+ * also sets — a router `Link` merges its own `aria-current` last, so that attribute has a
+ * second author and would be the breadcrumb mistake again.
  */
 export function ModuleNav({ items, ariaLabel }: ModuleNavProps) {
   const strings = useStrings();
   const resolve = useUiText();
   const pathname = useRouterState({ select: (state) => state.location.pathname });
+  // Resolved over the whole strip, not per tab, and through the same function the sidebar uses
+  // (ADR 0097 §6, amended in 4e). Two tabs where one path prefixes the other would otherwise
+  // both be current, and this component previously compared `pathname === item.to` raw — which
+  // diverged from its own Link in both directions, as the sheet's comment on the active rule
+  // says. Longest match wins, so `/records` does not steal from `/records/mapping`.
+  const activeTo = activeNavPath(pathname, items);
 
   if (items.length === 0) {
     return null;
   }
 
   return (
-    <nav
-      aria-label={resolve(ariaLabel ?? strings.moduleNavigationLabel)}
-      data-terp="module-nav"
-      style={navStyle}
-    >
-      <ul style={listStyle}>
+    <nav aria-label={resolve(ariaLabel ?? strings.moduleNavigationLabel)} data-terp="module-nav">
+      <ul data-terp="module-nav-list">
         {items.map((item) => {
           const label = resolve(item.label);
-          const isActive = pathname === item.to;
+          const isActive = item.to === activeTo;
           return (
             <li key={item.to}>
               <Link
                 to={item.to}
-                activeOptions={{ exact: true }}
+                // `exact` is ALWAYS true here, whatever the tab asked for, and the asymmetry is
+                // the mechanism rather than an oversight. The tab's own `exact` governs the
+                // component's predicate above; this governs when the ROUTER volunteers its own
+                // `aria-current`, and the router decides per link with no knowledge of siblings.
+                // Left non-exact it prefix-matches, so at `/tickets/projects` it would mark the
+                // `/tickets` tab current too — a second current item the component never chose.
+                // Exact matching means "the router thinks this is active" implies the path equals
+                // the URL, which is the longest possible match, which is always the tab the
+                // predicate picked. The router can only agree.
+                //
+                // includeSearch: false for the other half. It defaults to true and on an exact
+                // link demands a full query-string match, so at `/tickets/projects?page=2` the
+                // router's own `data-status` said inactive while this component said active.
+                // Nothing paints from `data-status`, which is exactly why that could sit there
+                // unnoticed.
+                activeOptions={{ exact: true, includeSearch: false }}
                 aria-current={isActive ? "page" : undefined}
-                style={{ ...linkStyle, ...(isActive ? activeLinkStyle : undefined) }}
+                data-terp="module-nav-link"
+                data-active={isActive ? "true" : undefined}
               >
                 {label}
               </Link>

package/src/Page.test.tsx

@@ -18,13 +18,16 @@ describe("Page", () => {
       </Page>,
     );
 
-    expect(screen.getByRole("heading", { level: 1, name: "Tasks" })).toBeInTheDocument();
-    expect(screen.getByRole("heading", { level: 1, name: "Tasks" })).toHaveStyle({
-      fontSize: "var(--font-size-lg)",
-      letterSpacing: "0",
-    });
-    expect(screen.getByRole("button", { name: "New" })).toBeInTheDocument();
     const title = screen.getByRole("heading", { level: 1, name: "Tasks" });
+    expect(title).toBeInTheDocument();
+    // The marker, not the declaration. jsdom computes no cascade, so toHaveStyle could only
+    // ever see an inline style — asserting the title's font size was asserting that Page
+    // styles itself from a style object, which is the thing ADR 0094 removes. What a unit
+    // test can hold is the fact the sheet keys on; the type is gated by styles.test.ts for
+    // existence and by the page-header baseline for what it renders as.
+    expect(title).toHaveAttribute("data-terp", "page-title");
+    expect(title.getAttribute("style")).toBeNull();
+    expect(screen.getByRole("button", { name: "New" })).toBeInTheDocument();
     const action = screen.getByRole("button", { name: "New" });
     expect(title.compareDocumentPosition(action) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
     expect(screen.getByText("body")).toBeInTheDocument();