@terpjs/react-core 0.8.0 → 0.9.0

package/src/sso.test.tsx

@@ -120,9 +120,12 @@ describe("SSO login (ADR 0058)", () => {
       </TerpProvider>,
     );
 
-    await waitFor(() =>
-      expect(screen.getByText("Single sign-on failed. Try again.")).toBeInTheDocument(),
-    );
+    // Announced, not merely displayed. This is the one screen whose user is not signed in
+    // yet, so a failure they cannot see leaves them with no signal at all that the sign-in
+    // did not happen — the form simply sits there. ResourceList's error has carried
+    // role="alert" since it existed; this one carried nothing.
+    const failure = await screen.findByRole("alert");
+    expect(failure).toHaveTextContent("Single sign-on failed. Try again.");
     expect(window.location.pathname).toBe("/");
   });
 });

package/src/styles.test.ts

@@ -534,11 +534,13 @@ describe("cascade structure", () => {
     // assertions because both had a real consumer until it migrated.
     //
     // The focus ring's !important could only ever beat an INLINE box-shadow on an element the
-    // selector matches, and there is none left: ConfirmDialog's dialog and Popover's panel were
-    // the two, and both took their surface from the sheet in stage 4. Of the three inline
-    // box-shadows remaining, AppShell's drawer and LoginView's panel sit on elements with no
-    // marker at all, and DataViewCardList's card is a div with onClick and no tabIndex, so it
-    // cannot match :focus-visible — which is why the sheet reaches it with :focus-within.
+    // selector matches, and there is now none anywhere in the package. ConfirmDialog's dialog
+    // and Popover's panel were the two that mattered and took their surface from the sheet in
+    // stage 4; the three that remained — AppShell's drawer, DataViewCardList's card and
+    // LoginView's card — went with those three components' own migrations, the last of them
+    // with LoginView. The DataView card is worth remembering anyway: it is a div with onClick
+    // and no tabIndex, so it cannot match :focus-visible at all, which is why the sheet reaches
+    // it with :focus-within.
     // Measured after removing it: a keyboard-focused primary button and a focused menu item both
     // still compute rgba(37,99,235,0.35) 0 0 0 3px, because the LAYER carries the ring, not the
     // escalation. That was always the claim in this file's header; the escalation was belt.
@@ -837,6 +839,36 @@ describe("cascade structure", () => {
       "appshell-header-group",
       "appshell-main",
       "appshell-footer",
+      "page",
+      "page-header",
+      "page-breadcrumbs",
+      "page-heading",
+      "page-title",
+      "resource-list",
+      "resource-list-create",
+      "resource-list-error",
+      "resource-list-empty",
+      "resource-list-items",
+      "resource-list-row",
+      "module-nav",
+      "module-nav-list",
+      "module-nav-link",
+      "profile-card",
+      "profile-avatar",
+      "profile-email",
+      "profile-role",
+      "login-view",
+      "login-card",
+      "login-brand",
+      "login-title",
+      "login-form",
+      "login-sso",
+      "login-separator",
+      "login-separator-rule",
+      "login-error",
+      "admin-form",
+      "admin-section-title",
+      "admin-payload",
     ]) {
       expect(
         declaresRuleFor(base, `[data-terp="${marker}"]`),

package/src/styles.ts

@@ -13,12 +13,18 @@
  * anything. A new escalation is therefore a claim that some element still styles
  * itself inline on the same property — state it, with the file, or do not add it.
  *
- * The migration itself is not finished: five modules still declare module-scope
- * base style objects (23 between them, gated in markers.test.ts). They are just no
- * longer in anyone's way — of what they render, only `module-nav` and
- * `resource-list` carry a marker, and no rule in `terp.state` targets either, so
- * retiring the last escalations left nothing inert. Checked by scanning the layer
- * against those files rather than by spot-checking a hover.
+ * THE LEDGER IS EMPTY. No module declares a module-scope base style object any more,
+ * and the unmarked-surface worklist is empty with it — both gated in markers.test.ts,
+ * both kept rather than deleted, for the reason the escalation ledger below is kept:
+ * an empty gate is where the next entry has to justify itself.
+ *
+ * And the measure is now the whole surface rather than the annotated part of it. The
+ * ledger counts module-scope `CSSProperties` declarations, which a call-site literal and
+ * an unannotated style object both slip past — that is how the built-in admin views kept
+ * five base styles through the entire migration with both ratchets reading clean. A third
+ * gate counts inline style SITES per file, so the only way out of it is to render none;
+ * the nine that remain are ADR 0094 §3's permanent inline side and nothing else, named
+ * one by one in markers.test.ts.
  *
  * A migrated component gets its base here and renders no `style={}` for it —
  * though it may still pass an inline value the sheet has no business owning, which
@@ -519,6 +525,35 @@ textarea[data-terp="input"] {
   color: var(--color-neutral-900);
 }
 
+/* Module navigation -------------------------------------------------------- */
+/* Secondary tabs for a module's sub-pages, and very nearly the same object as tab
+   above: a transparent 2px edge the active item colours, muted ink the active item
+   darkens. The difference is that these are router links rather than buttons, and
+   that difference decides where the active state is keyed — see terp.state.
+
+   The edges are logical (border-block-end) to match tab and appshell-footer rather
+   than the physical borderBottom the component declared. Identical in every writing
+   mode this framework ships, and the sheet already had one convention. */
+[data-terp="module-nav"] {
+  border-block-end: 1px solid var(--color-neutral-200);
+}
+[data-terp="module-nav-list"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+[data-terp="module-nav-link"] {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-2) 0;
+  color: var(--color-neutral-600);
+  text-decoration: none;
+  border-block-end: 2px solid transparent;
+}
+
 /* Breadcrumbs -------------------------------------------------------------- */
 /* The trail owns its whole subtree, so the list and its items are addressed
    structurally and the current crumb by the aria-current it already carries —
@@ -806,6 +841,240 @@ textarea[data-terp="input"] {
   font-size: var(--font-size-xs);
 }
 
+/* The page frame ----------------------------------------------------------- */
+/* Every routed view is this shape: one header carrying the breadcrumb trail (when
+   there is a path back up) and the title row, then the body. HubPage, OverviewPage
+   and DetailPage are all this frame with a different trail.
+
+   The header is a <header> ELEMENT and Page has to keep it one, which is a
+   constraint this sheet cannot express and the component records at the site: the
+   layout contract's runtime slot check reads article.children and drops the header
+   by TAG NAME, so re-rendering it as a marked <div> would put it back into the body
+   set and fail every governed OverviewPage and DetailPage closed. Marking it is
+   additive; retagging it is not. The body likewise takes no wrapper — not even a
+   display: contents one, since that check is a DOM traversal and would see the node
+   whether or not it generates a box.
+
+   align-content: start is what keeps the rows at the top of a page taller than its
+   content — the loading and error frames, where the body is one small block. With
+   the default the two rows would spread to fill the height. It needs something to
+   stretch the article before it is observable at all, which is why page-loading and
+   page-error render inside a grid box rather than a plain tall div. */
+[data-terp="page"] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-4);
+  align-content: start;
+  min-width: 0;
+}
+[data-terp="page-header"] {
+  display: grid;
+  gap: var(--space-2);
+}
+/* The crumb row keeps a 2rem floor, and it is doing work rather than reserving
+   space for its own sake: the trail is shorter than 2rem at font-size-sm, so
+   dropping the floor closes the gap under the trail on every page that has one.
+   Measured — removing it moves all six baselines with a trail and nothing else. */
+[data-terp="page-breadcrumbs"] {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+}
+/* Title left, the actions slot right, wrapping rather than overflowing when a long
+   title meets a wide action cluster. */
+[data-terp="page-heading"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+/* The single h1 of the view. margin: 0 is load-bearing — the browser default h1
+   margin would otherwise fight the header's own gap. */
+[data-terp="page-title"] {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0;
+  color: var(--color-neutral-900);
+  line-height: 1.3;
+}
+
+/* The sign-in screen ------------------------------------------------------- */
+/* The one screen an unauthenticated user sees, and the only full-viewport page in
+   the package: a 100vh grid centring one card. The reset layer's box-sizing note
+   already names this page as the reason it exists — content-box plus 100vh plus
+   padding overflows the viewport by exactly the padding, which is a phantom
+   scrollbar on a page that fits.
+
+   The buttons fill their group, and that is a rule on the GROUP rather than a prop
+   on Button, because it has exactly one consumer in the package. Button declares
+   width: fit-content, which is a definite width — so grid stretch does NOT do this
+   for free, and dropping the declaration shrinks all four buttons to their labels.
+   Two selectors at (0,2,0) against the button's own (0,1,0), same layer, so
+   specificity settles it and source order never enters into it. A block prop on
+   Button would be a new public API minted for one internal caller; the sheet can
+   already reach the thing, which is the test stage 4 set when it deleted Menu's
+   style props.
+
+   The separator's ink moves from --color-neutral-500 to --color-fg-subtle, which is
+   the rest of the migration ec36a2b started rather than a new decision: the two
+   tokens are byte-identical in light and dark, and only fg-subtle has a declared
+   pairing (subtle-on-surface) for the gate to measure. So the screenshot themes do
+   not move and midnight and twilight get the value the gate has been measuring all
+   along. The "or" is aria-hidden but it is visible text, so it is held to AA rather
+   than treated as an ornament.
+
+   The error line has no specimen and cannot have one: the error is internal state set
+   only in a catch, and sso.error needs a real failed callback, which needs a URL the
+   lane owns. Its ink is gated statically instead — danger-on-card, declared for this
+   surface and measured in all five themes. */
+[data-terp="login-view"] {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: var(--space-6);
+  background: var(--color-neutral-50);
+  font-family: var(--font-family-sans);
+  color: var(--color-neutral-900);
+}
+[data-terp="login-card"] {
+  width: 100%;
+  max-width: 24rem;
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  background: var(--color-neutral-0);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+[data-terp="login-brand"] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-neutral-900);
+}
+[data-terp="login-title"] {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+}
+[data-terp="login-form"],
+[data-terp="login-sso"] {
+  display: grid;
+  gap: var(--space-3);
+}
+[data-terp="login-form"] > [data-terp="button"],
+[data-terp="login-sso"] > [data-terp="button"] {
+  width: 100%;
+}
+[data-terp="login-separator"] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+[data-terp="login-separator-rule"] {
+  flex: 1;
+  border-block-start: 1px solid var(--color-neutral-200);
+}
+[data-terp="login-error"] {
+  margin: 0;
+  color: var(--color-status-danger);
+  font-size: var(--font-size-sm);
+}
+
+/* The profile screen ------------------------------------------------------- */
+/* The built-in /profile view: two cards, an avatar tile, and the identity lines.
+   Its cards are its own rather than the Card component's — the same declarations on
+   a different element — and folding the two together is a component decision, not a
+   styling one, so it stays a follow-up rather than riding in on a migration whose
+   whole contract is zero pixel movement.
+
+   overflow-wrap on the address is real and unobservable: the workbench session is a
+   fixed user whose address is short, so no specimen can paint the case it exists for
+   (an address has no spaces to break at, so a long one widens the card past its own
+   max-width instead of wrapping). Asserted in the unit test as the marker it keys on;
+   there is no picture of it and cannot be until the mock session is variable. */
+[data-terp="profile-card"] {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  max-width: 32rem;
+  background: var(--color-neutral-0);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+}
+/* The initials tile. It is aria-hidden, so axe skips it by design and the declared
+   pairing is the only thing measuring its ink: brand-primary-contrast on
+   brand-primary is primary-button-label, which the contrast gate holds at AA in all
+   five themes. Exactly the shape of NavIcon's fallback tile, which failed at 1.60
+   for as long as nothing declared it. */
+[data-terp="profile-avatar"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+  background: var(--color-brand-primary);
+  color: var(--color-brand-primary-contrast);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+}
+[data-terp="profile-email"] {
+  overflow-wrap: anywhere;
+}
+[data-terp="profile-role"] {
+  margin: 0;
+  color: var(--color-neutral-600);
+}
+
+/* The built-in admin screens ----------------------------------------------- */
+/* The packaged /admin views. Three surfaces, and they were invisible to both
+   ratchets for the entire migration — which is why they are here rather than in
+   0.8.0. The worklist names files with NO marker at all, and every admin view
+   rendered none, so it read as a view composition and was excluded on purpose. The
+   ledger counts module-scope CSSProperties declarations, and these were four
+   call-site literals plus one unannotated object. Neither gate was wrong; both were
+   narrower than they looked, and the same commit widens the measure.
+
+   The form box is ONE marker across two files, because UserCreate and GroupCreate
+   constrain their form to the same measure — the same surface twice, not two
+   surfaces that happen to agree today. */
+[data-terp="admin-form"] {
+  max-width: 32rem;
+}
+/* A section heading inside a detail screen: the members list, the permission
+   grants. font-size-base rather than the UA default, which for an h2 is LARGER than
+   the page's own h1 at font-size-lg — so without this a section outranks the view
+   it sits in. */
+[data-terp="admin-section-title"] {
+  margin: 0;
+  font-size: var(--font-size-base);
+}
+/* The audit event's JSON payload. No font-family: it is a <pre>, so the UA
+   stylesheet's monospace already applies and the inline object set none either.
+
+   font-size-sm loses the inline fallback the object carried (0.875rem) and no other
+   rule in this sheet has one. The fallback could never fire — tokens.guard.test.ts
+   refuses any var() in react-core naming a property the contract does not publish,
+   so the token is always there. It recorded an author's doubt, not an option. */
+[data-terp="admin-payload"] {
+  margin: 0;
+  padding: var(--space-3);
+  background: var(--color-neutral-100);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  overflow-x: auto;
+}
+
 /* Hub cards --------------------------------------------------------------- */
 /* This whole family was in terp.state, resting declarations and all, for the same
    reason the icon button's transition was: that is where the hover rules needing it
@@ -1613,6 +1882,58 @@ th[data-terp="dataview-actions-cell"] > span {
   color: var(--color-neutral-700);
 }
 
+/* Resource list ------------------------------------------------------------ */
+/* The plain listing screen: a write-gated create row, then the rows. The DataView is
+   the same job at scale, and this one stays deliberately simple, so its rules are
+   geometry plus two inks.
+
+   The create row keeps its flex layout and the input keeps flex: 1 as a RULE rather
+   than becoming a 1fr auto grid, and that is a move rather than a decision. With
+   flex: 1 the input's basis is 0 so it may shrink below its intrinsic width; a 1fr
+   track floors at min-content instead. The two agree at this list's 40rem cap, so
+   swapping them would have changed nothing anybody could see until some narrower
+   container found the difference — which is the kind of diff this migration exists
+   not to introduce.
+
+   Neither paragraph resets its margin, and that is verbatim rather than an
+   oversight: both are <p> elements whose default margin is what separates them from
+   the form above and the rows below. Adding margin: 0 here would move the rows. */
+[data-terp="resource-list"] {
+  display: grid;
+  gap: var(--space-4);
+  max-width: 40rem;
+}
+[data-terp="resource-list-create"] {
+  display: flex;
+  gap: var(--space-2);
+}
+[data-terp="resource-list-create"] > [data-terp="input"] {
+  flex: 1;
+}
+[data-terp="resource-list-error"] {
+  color: var(--color-status-danger);
+}
+[data-terp="resource-list-empty"] {
+  color: var(--color-neutral-600);
+}
+[data-terp="resource-list-items"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-2);
+}
+[data-terp="resource-list-row"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  background: var(--color-neutral-0);
+}
+
 /* Empty / error / loading states ------------------------------------------- */
 /* Same centred block, opposite messages: empty is a dashed outline on the page
    surface because nothing is wrong, error is a filled danger wash because
@@ -2578,6 +2899,35 @@ button[data-terp="input"][data-placeholder="true"] {
   cursor: not-allowed;
 }
 
+/* Module navigation ------------------------------------------------------- */
+/* Which sub-page you are on, here for the same reason the selected tab is: the
+   accent edge and the darker ink have to beat the resting pair.
+
+   Keyed on data-active, which ModuleNav writes, and deliberately NOT on the
+   aria-current the same element also carries. That attribute has a second author:
+   TanStack's link props spread the router's own active props LAST, after the
+   caller's, so on a Link the router has the final word on aria-current. This is
+   the breadcrumb lesson in its exact form — reuse a semantic only where the
+   component is its sole author.
+
+   The two notions of "active" are not the same predicate, and they diverge in BOTH
+   directions, which is worth knowing before touching either. activeOptions
+   .includeSearch defaults to true, so the router additionally demands an exact
+   query-string match that ModuleNav does not — the router is narrower there. And
+   with exact matching the router compares through exactPathTest, which is
+   removeTrailingSlash(a) === removeTrailingSlash(b), while ModuleNav compares
+   pathname === item.to raw — so on a path with a trailing slash the ROUTER is
+   active and ModuleNav is not, and this rule withholds the accent edge from a tab
+   the router considers current. That second case is a real defect and it is older
+   than this rule: the inline styling it replaced read the same isActive, so the
+   behaviour is unchanged and only the reasoning was wrong. Fixing the predicate
+   belongs with the navigation model, because that is what decides what "active"
+   should mean. */
+[data-terp="module-nav-link"][data-active="true"] {
+  color: var(--color-neutral-900);
+  border-block-end-color: var(--color-fg-accent);
+}
+
 /* Hub cards --------------------------------------------------------------- */
 /* The hover edge recolours hubcard-BODY, not the card.
 

package/src/ui/Button.test.tsx

@@ -39,9 +39,11 @@ describe("Button", () => {
   });
 
   it("still forwards an explicit style, so framework callers keep their escape", () => {
-    // The sheet owns the base; a one-off geometry override (LoginView's full-width submit)
-    // is inline and therefore still wins, which is the boundary ADR 0094 draws between
-    // styling policy and a measured value.
+    // The sheet owns the base, and the escape still has to work: a caller may pass a measured
+    // value the sheet has no business owning, and it wins because a style attribute outranks
+    // any author rule (ADR 0094 §3). It is no longer LoginView's full-width submit, which is
+    // what this comment used to cite — a fixed 100% is layout policy rather than a measured
+    // value, and the sheet could reach it, so it is a rule on the login form now.
     render(<Button style={{ width: "100%" }}>Wide</Button>);
     expect(screen.getByRole("button", { name: "Wide" }).style.width).toBe("100%");
   });