@terpjs/react-core 0.8.0 → 0.9.0

package/README.md

@@ -63,6 +63,7 @@ JSDoc, so your editor shows the same guidance inline. **Never deep-import** from
 | Export | Use |
 |---|---|
 | `Authorized`, `useCan` | Gate UI on `can(module, action)` — write buttons, admin panels. |
+| `usePermissions`, `useHasPermission` | The caller's **named** grants from `GET /me` (ADR 0096), for a screen whose write needs `definitions.publish` rather than a rank. `Authorized` takes an optional `permission` alongside `action`; both must pass, as the server's own guard does. Display only — the backend re-checks. |
 | `canPerform`, `DEFAULT_RANK_THRESHOLDS` | The role-rank predicate behind the gate. |
 | `visibleNav` | Filter nav items to what the current user may see. |
 
@@ -85,6 +86,7 @@ runtime, fail closed (ADR 0059), so every screen keeps the breadcrumb/title/erro
 | `useRouteParam` | Read one route param, fail closed: the declared param comes back as a string, an undeclared name throws a directive error instead of silently yielding `undefined`. Replaces the unchecked `useParams({ strict: false }) as {…}` cast (ADR 0092). Checked against the generated route table when the app has one. |
 | `useRouteParams` | Read a whole declared route's params, typed exactly: `const { recordId } = useRouteParams("/records/:recordId")`. With a generated route table, a typo in the path *or* a param name is a typecheck error. |
 | `useTerpNavigate` | Navigate by manifest path: `navigate({ to: "/records/:recordId", params: { recordId } })`. An undeclared path is a typecheck error and a parameterised route requires its params — a typo'd path used to be a dead link that shipped green. Takes the manifest's `:id` spelling and translates to the router's `$id`. |
+| `useRouteSearch` | Read a declared route's query-string keys, typed: `const { status, page } = useRouteSearch("/records")` (ADR 0096). Every value is `string | undefined`, and an undeclared key is a typecheck error — so a filtered list screen stays inside the checked seam instead of reaching for the router's own `useSearch`. Declare them in the manifest: `search: ["status", "page"]`. |
 | `ModuleNav` | Secondary horizontal tabs for intra-module sub-pages (real routes, not state). |
 | `PageActions` | Primary action + overflow menu for a page header. |
 
@@ -112,7 +114,8 @@ declare module "@terpjs/react-core" {
 ```
 
 From then on `useRouteParams("/records/:recordId")` is exact, `useRouteParam` refuses a
-param no route declares, and `useTerpNavigate` refuses an undeclared path. Regenerate
+param no route declares, `useRouteSearch` is keyed to the route's declared query-string
+keys, and `useTerpNavigate` refuses an undeclared path (or an undeclared `search` key). Regenerate
 after changing a manifest route — `terp verify`'s `routes-drift` check refuses a stale
 table and names the command (it runs before the typecheck, so a stale table reads as
 "regenerate", not as errors in your own screens). A route whose `path` is not a plain
@@ -158,6 +161,7 @@ marker, counted by the escape-hatch budget.
 | `ResourceList` | The standard simple CRUD list screen: titled section, write-gated create form, loading/error/empty states. Composable — screens needing more render their own React. |
 | `unwrap`, `unwrapOptional`, `ApiError` | Turn a generated-client result into data-or-throw; `ApiError` carries the envelope's `code` / `status` / `requestId`. `unwrapOptional` returns `null` on a 404 instead — for resources whose absence is a normal state (a `/latest` snapshot not yet published), the client-side analog of `BaseService.find` beside `get`. |
 | `FileUpload`, `useFileDownload` | The files-capability surface (ADR 0056/0057): a token-styled attachment picker that uploads through the typed client, and an authenticated download helper (a raw `<a href>` would carry no bearer token). |
+| `useEndpointDownload`, `saveBlob` | Download an artifact the backend **generates** — an evidence bundle, a CSV export — which has no stored file id (ADR 0096). Goes through the session client, so it carries the base URL and bearer token and rejects a non-2xx instead of saving the error body under the intended filename. |
 
 ## Feedback & states
 
@@ -168,7 +172,7 @@ marker, counted by the escape-hatch budget.
 | `ErrorState`, `describeError` | Human-readable failure block for a caught error. |
 | `ErrorMessagesProvider`, `useErrorMessage`, `DEFAULT_ERROR_MESSAGES` | Map stable backend error codes to copy; falls back to the envelope `detail`. |
 | `ToastProvider`, `useToast` | Transient success/error feedback (no toast library). |
-| `ConfirmDialog` | Accessible confirmation modal (native `<dialog>`); use before any destructive action. |
+| `ConfirmDialog` | Accessible confirmation modal (native `<dialog>`); use before any destructive action. A modal is for a confirmation or an explicit post-action moment — an edit form or a detail view belongs in a routed page, or in an expanded row beside the thing it edits (ADR 0096 §4). |
 
 ## Forms & primitives
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terpjs/react-core",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "Terp React stack core — typed @terpjs/contract client provider, auth session, capability gates, TanStack Router adapter, app shell, page archetypes, DataView and token-styled UI primitives. First frontend stack; see README.md for the component catalog.",
   "exports": {
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.170.16",
-    "@terpjs/contract": "^0.8.0"
+    "@terpjs/contract": "^0.9.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/Authorized.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { useEffect } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { Authorized } from "./Authorized";
+import { Authorized, useHasPermission, usePermissions } from "./Authorized";
 import { TerpProvider, useAuth } from "./TerpProvider";
 
 function jsonResponse(body: unknown): Response {
@@ -57,4 +57,66 @@ describe("Authorized", () => {
     expect(screen.getByText("no-admin")).toBeInTheDocument();
     expect(screen.queryByText("admin-only")).not.toBeInTheDocument();
   });
+
+  it("gates on a named grant, not only rank (ADR 0096)", async () => {
+    // The hole this closes: rank was all the wire carried, so a screen whose write needs
+    // `definitions.publish` hid by rank as a proxy and handled the 403 anyway.
+    vi.stubGlobal(
+      "fetch",
+      vi.fn<typeof fetch>(async (input) => {
+        const url = (input as Request).url;
+        if (url.endsWith("/api/v1/auth/login")) {
+          return jsonResponse({ access_token: "token", token_type: "bearer" });
+        }
+        return jsonResponse({
+          id: "u1",
+          email: "editor@example.com",
+          role_rank: 20,
+          role_name: "editor",
+          permissions: ["definitions.manage"],
+        });
+      }),
+    );
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <Authorized action="write" permission="definitions.manage">
+          <span>held</span>
+        </Authorized>
+        <Authorized action="write" permission="definitions.publish">
+          <span>not held</span>
+        </Authorized>
+        {/* Rank alone still fails closed even when the grant is held. */}
+        <Authorized action="admin" permission="definitions.manage">
+          <span>rank too low</span>
+        </Authorized>
+      </TerpProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("held")).toBeInTheDocument());
+    expect(screen.queryByText("not held")).toBeNull();
+    expect(screen.queryByText("rank too low")).toBeNull();
+  });
+
+  it("reports no permissions when signed out, and none for an app that grants none", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn<typeof fetch>(async () => new Response("", { status: 401 })),
+    );
+
+    function Probe() {
+      return (
+        <span>{`n=${usePermissions().length} has=${String(useHasPermission("anything"))}`}</span>
+      );
+    }
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <Probe />
+      </TerpProvider>,
+    );
+
+    // Empty rather than undefined, so a screen can read it without guarding first.
+    await waitFor(() => expect(screen.getByText("n=0 has=false")).toBeInTheDocument());
+  });
 });

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/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/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();

package/src/ProfileView.tsx

@@ -1,5 +1,3 @@
-import type { CSSProperties } from "react";
-
 import { Page } from "./Page";
 import { useAuth } from "./TerpProvider";
 import { LanguageSwitcher } from "./locale";
@@ -9,38 +7,15 @@ import { userInitials } from "./UserMenu";
 import { Button } from "./ui/Button";
 import { useStrings } from "./uiText";
 
-const avatarStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "3.5rem",
-  height: "3.5rem",
-  flexShrink: 0,
-  borderRadius: "var(--radius-full)",
-  background: "var(--color-brand-primary)",
-  color: "var(--color-brand-primary-contrast)",
-  fontSize: "var(--font-size-lg)",
-  fontWeight: "var(--font-weight-medium)" as CSSProperties["fontWeight"],
-};
-
-const mutedStyle: CSSProperties = { margin: 0, color: "var(--color-neutral-600)" };
-
-const cardStyle: CSSProperties = {
-  display: "grid",
-  gap: "var(--space-4)",
-  padding: "var(--space-4)",
-  maxWidth: "32rem",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-};
-
 /**
  * The built-in profile / settings page the {@link UserMenu}'s Settings item opens.
  * `buildAppRouter` mounts it at `/profile` in every app (an app manifest claiming
  * that path wins): the signed-in identity (avatar, email, role — the server-validated
  * `/me` session, not token claims), the standard theme + language preferences, and
  * sign-out. A `Page` archetype, so it satisfies the routed-view frame control.
+ *
+ * It renders no inline styles: both cards, the avatar tile and the two identity lines take
+ * their geometry and ink from the injected react-core sheet (ADR 0094).
  */
 export function ProfileView() {
   const auth = useAuth();
@@ -52,14 +27,14 @@ export function ProfileView() {
   return (
     <Page title={strings.profile}>
       <Stack gap={4}>
-        <div style={cardStyle}>
+        <div data-terp="profile-card">
           <Stack direction="row" gap={3} align="center">
-            <span aria-hidden="true" style={avatarStyle}>
+            <span aria-hidden="true" data-terp="profile-avatar">
               {userInitials(user.email)}
             </span>
             <Stack gap={0}>
-              <strong style={{ overflowWrap: "anywhere" }}>{user.email}</strong>
-              <p style={mutedStyle}>{user.role_name}</p>
+              <strong data-terp="profile-email">{user.email}</strong>
+              <p data-terp="profile-role">{user.role_name}</p>
             </Stack>
           </Stack>
           <DetailList
@@ -69,7 +44,7 @@ export function ProfileView() {
             ]}
           />
         </div>
-        <div style={cardStyle}>
+        <div data-terp="profile-card">
           <ThemeToggle />
           <LanguageSwitcher />
           <div>