@terpjs/react-core 0.7.0 → 0.9.0

package/src/HubPage.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 
 import { Page } from "./Page";
@@ -19,22 +19,15 @@ export type HubPageProps = Omit<
   parents?: PageProps["breadcrumbs"];
 };
 
-const gridStyle: CSSProperties = {
-  display: "grid",
-  gridTemplateColumns: "repeat(auto-fit, minmax(min(16rem, 100%), 1fr))",
-  gridAutoRows: "1fr",
-  gap: "var(--space-4)",
-  alignItems: "stretch",
-  listStyle: "none",
-  margin: 0,
-  padding: 0,
-};
-
 /**
  * The landing / hub page archetype: a `Page` whose body is a responsive grid of
  * {@link HubCard} links into the sub-areas of a domain. Use it as a module index that
  * adds discovery value (each card can carry a live `stat`, making the hub a lightweight
  * dashboard) — never as a mandatory speed-bump in front of a single frequently-used list.
+ *
+ * It renders no inline styles: the grid and every part of a card take their geometry from
+ * the injected react-core sheet, matched on the `data-terp` markers stamped below
+ * (ADR 0094).
  */
 export function HubPage({ children, parents, breadcrumbs, ...page }: HubPageProps) {
   // The runtime half of the slot-typed layout contract control (ADR 0079) for the hub
@@ -61,7 +54,7 @@ export function HubPage({ children, parents, breadcrumbs, ...page }: HubPageProp
   }
   return (
     <Page {...page} breadcrumbs={parents ?? breadcrumbs}>
-      <ul ref={gridRef} style={gridStyle}>
+      <ul ref={gridRef} data-terp="hubpage-grid">
         {children}
       </ul>
     </Page>
@@ -89,86 +82,23 @@ export interface HubCardProps {
   renderLink?: RenderHubCardLink;
 }
 
-const cardStyle: CSSProperties = {
-  height: "100%",
-  minHeight: 0,
-};
-
-const cardBodyStyle: CSSProperties = {
-  display: "grid",
-  gridTemplateRows: "auto minmax(3rem, 1fr) auto",
-  gap: "var(--space-2)",
-  height: "100%",
-  minHeight: "10rem",
-  padding: "var(--space-4)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  background: "var(--color-neutral-0)",
-  color: "var(--color-neutral-900)",
-  boxSizing: "border-box",
-};
-
-const cardTitleRowStyle: CSSProperties = {
-  margin: 0,
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-3)",
-};
-
-const iconTileStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "2.25rem",
-  height: "2.25rem",
-  flexShrink: 0,
-  borderRadius: "var(--radius-md)",
-  background: "var(--color-brand-primary-soft)",
-  color: "var(--color-fg-accent)",
-};
-
-const titleTextStyle: CSSProperties = {
-  color: "var(--color-neutral-900)",
-  fontSize: "var(--font-size-base)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-  transition: "color 150ms ease",
-};
-
-const descriptionStyle: CSSProperties = {
-  margin: 0,
-  color: "var(--color-neutral-600)",
-  fontSize: "var(--font-size-sm)",
-  lineHeight: 1.5,
-};
-
-const emptyDescriptionStyle: CSSProperties = { ...descriptionStyle, visibility: "hidden" };
-
-const statStyle: CSSProperties = {
-  color: "var(--color-neutral-900)",
-  fontSize: "var(--font-size-sm)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-};
-const emptyStatStyle: CSSProperties = { ...statStyle, visibility: "hidden" };
-
-const linkStyle: CSSProperties = {
-  textDecoration: "none",
-  color: "inherit",
-  display: "block",
-  height: "100%",
-  minHeight: 0,
-};
-
 const anchorRenderLink: RenderHubCardLink = ({ to, children }) => (
-  <a href={to} data-terp="hubcard-link" style={linkStyle}>
+  <a href={to} data-terp="hubcard-link">
     {children}
   </a>
 );
 
 /**
- * A single navigable card inside a {@link HubPage}: icon + title, a short description of
+ * A single navigable card inside a {@link HubPage}: icon + title, a short explanation of
  * the area, and an optional live `stat`. The whole card is one link, rendered through
  * `renderLink` so the hub stays router-agnostic — defaulting to the surrounding router's
  * `Link`, and to a plain anchor only outside a Terp router.
+ *
+ * The description and stat rows always render, carrying a non-breaking space when the prop
+ * is absent, so a card's three grid rows keep their heights and a bare card stays flush
+ * with a full one in the same row. `data-empty` is what hides the placeholder — an
+ * attribute rather than a second style object, because "is this row a placeholder" is a
+ * fact about the element that a rule can read.
  */
 export function HubCard({
   to,
@@ -184,27 +114,26 @@ export function HubCard({
     (navLink === null
       ? anchorRenderLink
       : ({ to: href, children }: { to: string; children: ReactNode }) => (
-          <span data-terp="hubcard-link" style={linkStyle}>
-            {navLink({ to: href, children })}
-          </span>
+          <span data-terp="hubcard-link">{navLink({ to: href, children })}</span>
         ));
   const resolve = useUiText();
   return (
-    <li data-terp="hubcard" style={cardStyle}>
+    <li data-terp="hubcard">
       {renderCardLink({
         to,
         children: (
-          <span data-terp="hubcard-body" style={cardBodyStyle}>
-            <span style={cardTitleRowStyle}>
-              {icon !== undefined && <span style={iconTileStyle}>{icon}</span>}
-              <strong data-terp="hubcard-title" style={titleTextStyle}>
-                {resolve(title)}
-              </strong>
+          <span data-terp="hubcard-body">
+            <span data-terp="hubcard-heading">
+              {icon !== undefined && <span data-terp="hubcard-icon">{icon}</span>}
+              <strong data-terp="hubcard-title">{resolve(title)}</strong>
             </span>
-            <span data-terp="hubcard-description" style={description === undefined ? emptyDescriptionStyle : descriptionStyle}>
+            <span
+              data-terp="hubcard-description"
+              data-empty={description === undefined ? "true" : undefined}
+            >
               {description === undefined ? " " : resolve(description)}
             </span>
-            <span data-terp="hubcard-stat" style={stat === undefined ? emptyStatStyle : statStyle}>
+            <span data-terp="hubcard-stat" data-empty={stat === undefined ? "true" : undefined}>
               {stat ?? " "}
             </span>
           </span>
@@ -213,4 +142,3 @@ export function HubCard({
     </li>
   );
 }
-

package/src/LoadingState.tsx

@@ -1,5 +1,3 @@
-import type { CSSProperties } from "react";
-
 import { injectTerpStyles } from "./styles";
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
@@ -23,13 +21,7 @@ export function InlineSpinner({ size = 16 }: InlineSpinnerProps) {
     <span
       aria-hidden="true"
       data-terp="spinner-ring"
-      style={{
-        display: "inline-block",
-        verticalAlign: "middle",
-        width: size,
-        height: size,
-        lineHeight: 0,
-      }}
+      style={{ width: size, height: size }}
     >
       <svg
         aria-hidden="true"
@@ -37,7 +29,6 @@ export function InlineSpinner({ size = 16 }: InlineSpinnerProps) {
         height={size}
         viewBox="0 0 24 24"
         fill="none"
-        style={{ display: "block" }}
       >
         <circle
           cx="12"
@@ -63,18 +54,6 @@ export interface LoadingStateProps {
   label?: UiText;
 }
 
-const wrapStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "var(--space-2)",
-  padding: "var(--space-6)",
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-sm)",
-};
-
-const spinnerColorStyle: CSSProperties = { color: "var(--color-fg-accent)" };
-
 /**
  * Standard inline loading indicator: a spinner plus a short label, announced
  * as a `status` live region. Use it when a query is pending and the page shell
@@ -85,8 +64,8 @@ export function LoadingState({ label }: LoadingStateProps) {
   const strings = useStrings();
   const resolve = useUiText();
   return (
-    <div role="status" data-terp="loading-state" style={wrapStyle}>
-      <span style={spinnerColorStyle}>
+    <div role="status" data-terp="loading-state">
+      <span data-terp="loading-state-spinner">
         <InlineSpinner size={20} />
       </span>
       <span>{resolve(label ?? strings.loading)}</span>

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,12 @@ 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). The buttons fill their group through a rule on the group
+ * rather than a prop on `Button` — `Button` declares `width: fit-content`, so a grid does not
+ * stretch them for free, and a `block` prop for one internal caller is API this does not need.
  */
 export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps = {}) {
   const auth = useAuth();
@@ -133,13 +78,13 @@ 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"
             placeholder={strings.email}
@@ -154,7 +99,7 @@ export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps
             onChange={(event) => setPassword(event.target.value)}
             required
           />
-          <Button type="submit" disabled={busy} style={fullWidthStyle}>
+          <Button type="submit" disabled={busy}>
             {busy ? strings.signingIn : strings.signIn}
           </Button>
           {devCredentials ? (
@@ -162,7 +107,6 @@ export function LoginView({ ssoProviders = [], devCredentials }: LoginViewProps
               type="button"
               variant="secondary"
               disabled={busy}
-              style={fullWidthStyle}
               onClick={() => {
                 setEmail(devCredentials.email);
                 setPassword(devCredentials.password);
@@ -175,19 +119,18 @@ 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"
                   disabled={busy}
-                  style={fullWidthStyle}
                   onClick={() => void onSso(provider)}
                 >
                   {`${strings.continueWith} ${provider.label ?? provider.name}`}
@@ -196,7 +139,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,25 @@ 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 aria-current on this
+    // element has a second author — keying the accent edge on it would be the breadcrumb
+    // defect again the moment the two disagreed about "active", which they can, in BOTH
+    // directions: the router also demands an exact query-string match (so it is narrower
+    // on a filtered URL), and it compares paths through removeTrailingSlash while this
+    // component compares them raw (so it is broader on a trailing slash, and then the
+    // accent edge goes missing on a tab the router calls current). The second is a real
+    // defect, older than the marker — the inline styling read the same isActive — and it
+    // is the navigation model's to fix. Neither case is reachable from this specimen.
+    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();
   });
 
   it("returns nothing for an empty tab list", () => {

package/src/ModuleNav.tsx

@@ -1,5 +1,4 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import type { CSSProperties } from "react";
 
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
@@ -17,38 +16,17 @@ 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();
@@ -60,12 +38,8 @@ export function ModuleNav({ items, ariaLabel }: ModuleNavProps) {
   }
 
   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;
@@ -75,7 +49,8 @@ export function ModuleNav({ items, ariaLabel }: ModuleNavProps) {
                 to={item.to}
                 activeOptions={{ exact: true }}
                 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();

package/src/Page.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { useContext, useEffect, useRef, useState } from "react";
 
 import { Breadcrumbs } from "./Breadcrumbs";
@@ -40,39 +40,6 @@ export interface PageProps {
   children: ReactNode;
 }
 
-const pageStyle: CSSProperties = {
-  display: "grid",
-  gridTemplateColumns: "minmax(0, 1fr)",
-  gap: "var(--space-4)",
-  alignContent: "start",
-  minWidth: 0,
-};
-
-const headerStyle: CSSProperties = { display: "grid", gap: "var(--space-2)" };
-
-const breadcrumbRowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  minHeight: "2rem",
-};
-
-const titleRowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "var(--space-3)",
-  flexWrap: "wrap",
-};
-
-const titleStyle: CSSProperties = {
-  margin: 0,
-  fontSize: "var(--font-size-lg)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-  letterSpacing: 0,
-  color: "var(--color-neutral-900)",
-  lineHeight: 1.3,
-};
-
 /**
  * The base content-page frame: every routed view is constructed the same way — one
  * header holding the breadcrumb trail (when there is a path back up through the
@@ -85,6 +52,9 @@ const titleStyle: CSSProperties = {
  * The frame also owns the async body states: `error` (which wins, so a failed
  * query never hides behind a spinner) then `isLoading` replace the body while the
  * header stays put, so the user keeps their place in the layers.
+ *
+ * It renders no inline styles: the frame's geometry and the title's type come from the
+ * injected react-core sheet, matched on the `data-terp` markers stamped below (ADR 0094).
  */
 export function Page({
   title,
@@ -138,15 +108,21 @@ export function Page({
       children
     );
   return (
-    <article ref={articleRef} style={pageStyle}>
-      <header style={headerStyle}>
+    <article ref={articleRef} data-terp="page">
+      {/* A <header> ELEMENT, and it has to stay one. The slot check above drops the header
+          from the body set by tagName, so re-rendering this as a marked <div> would put it
+          back in and fail every governed OverviewPage / DetailPage closed. The marker is
+          additive; the tag is load-bearing. For the same reason the body below takes no
+          wrapper of its own — not even a display: contents one, since article.children is a
+          DOM traversal and would see it. */}
+      <header data-terp="page-header">
         {hasAncestors && (
-          <div style={breadcrumbRowStyle}>
+          <div data-terp="page-breadcrumbs">
             <Breadcrumbs items={trail} renderLink={renderLink} />
           </div>
         )}
-        <div style={titleRowStyle}>
-          <h1 style={titleStyle}>{resolve(title)}</h1>
+        <div data-terp="page-heading">
+          <h1 data-terp="page-title">{resolve(title)}</h1>
           {actions}
         </div>
       </header>

package/src/PageActions.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
+import { injectTerpStyles } from "./styles";
 import { Menu, MenuItem } from "./ui/Menu";
 import { useStrings } from "./uiText";
 import type { UiText } from "./uiText";
 
+injectTerpStyles();
+
 export interface OverflowAction {
   /** Display label for the menu item. */
   label: UiText;
@@ -25,14 +28,6 @@ export interface PageActionsProps {
   className?: string;
 }
 
-const clusterStyle: CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  gap: "var(--space-2)",
-};
-
 /** Standard right-aligned action cluster for page headers. */
 export function PageActions({ primary, secondary, overflow, className }: PageActionsProps) {
   const strings = useStrings();
@@ -43,7 +38,7 @@ export function PageActions({ primary, secondary, overflow, className }: PageAct
   }
 
   return (
-    <div className={className} style={clusterStyle}>
+    <div className={className} data-terp="page-actions">
       {hasOverflow && (
         <Menu trigger="⋯" triggerLabel={strings.moreActions}>
           {({ close }) => (

package/src/ProfileView.test.tsx

@@ -69,6 +69,21 @@ describe("ProfileView", () => {
     );
     expect(screen.getAllByText("jane.doe@example.com").length).toBeGreaterThanOrEqual(1);
     expect(screen.getByText("editor (20)")).toBeInTheDocument();
+
+    // The identity block, which nothing asserted before: the initials tile was entirely
+    // unreached by any test, and is aria-hidden so axe skips it too. Markers plus the
+    // absence of a style attribute, because the geometry is a sheet rule now (ADR 0094) and
+    // jsdom computes no cascade. The address marker matters most of the three — its
+    // overflow-wrap has no specimen, since the mock session's address is short, so this is
+    // the only gate that the element a long address would need is still the marked one.
+    const avatar = document.querySelector('[data-terp="profile-avatar"]');
+    expect(avatar).not.toBeNull();
+    expect(avatar?.textContent).toBe("JD");
+    expect(avatar?.getAttribute("style")).toBeNull();
+    const email = document.querySelector('[data-terp="profile-email"]');
+    expect(email?.textContent).toBe("jane.doe@example.com");
+    expect(email?.getAttribute("style")).toBeNull();
+    expect(document.querySelectorAll('[data-terp="profile-card"]')).toHaveLength(2);
     // The stacked preference controls live here (settings surface).
     expect(screen.getByLabelText("Theme")).toBeInTheDocument();
     expect(screen.getByLabelText("Language")).toBeInTheDocument();