@terpjs/react-core 0.7.0 → 0.9.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/Breadcrumbs.test.tsx

@@ -42,4 +42,28 @@ describe("Breadcrumbs", () => {
     expect(screen.queryByRole("link")).not.toBeInTheDocument();
     expect(screen.getByText("Section")).not.toHaveAttribute("aria-current");
   });
+
+  it("marks only the final crumb as current, on a marker of its own", () => {
+    // The current-crumb styling deliberately does NOT key on aria-current. A router's Link
+    // stamps aria-current="page" on every link whose path is a prefix of the current one —
+    // which every ancestor crumb is — so borrowing that attribute painted the whole trail as
+    // the current page. The marker says what this component means, not what a router infers.
+    const { container } = render(
+      <Breadcrumbs
+        items={[{ label: "Tasks", to: "/tasks" }, { label: "Open", to: "/tasks/open" }, { label: "Here" }]}
+        renderLink={(item) => (
+          <a href={item.to} aria-current="page">
+            {item.label}
+          </a>
+        )}
+      />,
+    );
+
+    const current = container.querySelectorAll('[data-terp="breadcrumbs-current"]');
+    expect(current).toHaveLength(1);
+    expect(current[0]).toHaveTextContent("Here");
+    // Both ancestors claim aria-current here, which is exactly the router behaviour that
+    // made the old selector wrong — and none of them may pick up the current styling.
+    expect(container.querySelectorAll('[aria-current="page"]')).toHaveLength(3);
+  });
 });

package/src/Breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { injectTerpStyles } from "./styles";
 import { useNavLink } from "./navLink";
@@ -29,32 +29,6 @@ export interface BreadcrumbsProps {
   renderLink?: RenderBreadcrumbLink;
 }
 
-const navStyle: CSSProperties = {
-  fontSize: "var(--font-size-sm)",
-  color: "var(--color-neutral-600)",
-};
-
-const listStyle: CSSProperties = {
-  listStyle: "none",
-  margin: 0,
-  padding: 0,
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--space-2)",
-};
-
-const currentStyle: CSSProperties = {
-  color: "var(--color-neutral-900)",
-  fontWeight: "var(--font-weight-medium)" as CSSProperties["fontWeight"],
-};
-
-const separatorStyle: CSSProperties = {
-  display: "inline-flex",
-  color: "var(--color-neutral-400)",
-  lineHeight: 0,
-};
-
 function ChevronSeparator() {
   return (
     <svg
@@ -92,22 +66,25 @@ export function Breadcrumbs({ items, renderLink }: BreadcrumbsProps) {
   const strings = useStrings();
   const resolve = useUiText();
   return (
-    <nav aria-label={strings.breadcrumbsLabel} data-terp="breadcrumbs" style={navStyle}>
-      <ol style={listStyle}>
+    <nav aria-label={strings.breadcrumbsLabel} data-terp="breadcrumbs">
+      <ol>
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
           const label = resolve(item.label);
           return (
-            <li key={`${index}-${label}`} style={listStyle}>
+            <li key={`${index}-${label}`}>
               {!isLast && item.to !== undefined ? (
                 renderCrumbLink({ label, to: item.to })
               ) : (
-                <span aria-current={isLast ? "page" : undefined} style={isLast ? currentStyle : undefined}>
+                <span
+                  aria-current={isLast ? "page" : undefined}
+                  data-terp={isLast ? "breadcrumbs-current" : undefined}
+                >
                   {label}
                 </span>
               )}
               {!isLast && (
-                <span aria-hidden="true" style={separatorStyle}>
+                <span aria-hidden="true" data-terp="breadcrumbs-separator">
                   <ChevronSeparator />
                 </span>
               )}

package/src/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useId, useRef } from "react";
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Button } from "./ui/Button";
 import { injectTerpStyles } from "./styles";
@@ -32,44 +32,6 @@ export interface ConfirmDialogProps {
   confirmDisabled?: boolean;
 }
 
-const dialogStyle: CSSProperties = {
-  width: "100%",
-  maxWidth: "26rem",
-  padding: 0,
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  boxShadow: "var(--shadow-lg)",
-  background: "var(--color-neutral-0)",
-  color: "var(--color-neutral-900)",
-};
-
-const bodyStyle: CSSProperties = {
-  display: "grid",
-  gap: "var(--space-3)",
-  padding: "var(--space-6)",
-};
-
-const dialogTitleStyle: CSSProperties = {
-  margin: 0,
-  fontSize: "var(--font-size-lg)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-  letterSpacing: 0,
-  color: "var(--color-neutral-900)",
-};
-
-const descriptionStyle: CSSProperties = {
-  color: "var(--color-neutral-600)",
-  fontSize: "var(--font-size-sm)",
-  lineHeight: 1.5,
-};
-
-const footerStyle: CSSProperties = {
-  display: "flex",
-  justifyContent: "flex-end",
-  gap: "var(--space-2)",
-  marginTop: "var(--space-2)",
-};
-
 /**
  * The shared confirmation dialog — replaces `window.confirm()` with an accessible,
  * token-styled modal. Use it before any destructive or irreversible action (delete,
@@ -99,6 +61,7 @@ export function ConfirmDialog({
   const strings = useStrings();
   const resolve = useUiText();
   const titleId = useId();
+  const descriptionId = useId();
   const dialogRef = useRef<HTMLDialogElement>(null);
 
   useEffect(() => {
@@ -130,7 +93,11 @@ export function ConfirmDialog({
       ref={dialogRef}
       data-terp="dialog"
       aria-labelledby={titleId}
-      style={dialogStyle}
+      // The consequence is the information a user needs before confirming a destructive action,
+      // and a modal announces its name and its description on open — unlinked body copy is
+      // reached only by manual exploration. Conditional, so a description-less dialog carries
+      // no dangling idref.
+      aria-describedby={description !== undefined ? descriptionId : undefined}
       onCancel={(event) => {
         // Escape: stay controlled — never let the platform close the element itself.
         event.preventDefault();
@@ -145,14 +112,16 @@ export function ConfirmDialog({
         }
       }}
     >
-      <div style={bodyStyle}>
-        <h2 id={titleId} style={dialogTitleStyle}>
+      <div data-terp="dialog-body">
+        <h2 id={titleId} data-terp="dialog-title">
           {resolve(title)}
         </h2>
         {description !== undefined && (
-          <div style={descriptionStyle}>{description}</div>
+          <div id={descriptionId} data-terp="dialog-description">
+            {description}
+          </div>
         )}
-        <div style={footerStyle}>
+        <div data-terp="dialog-actions">
           <Button variant="secondary" disabled={isPending} onClick={() => onOpenChange(false)}>
             {resolve(cancelLabel ?? strings.cancel)}
           </Button>

package/src/EmptyState.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Icon } from "./icons";
+import { injectTerpStyles } from "./styles";
 import { useUiText } from "./uiText";
 import type { UiText } from "./uiText";
 
+injectTerpStyles();
+
 export interface EmptyStateProps {
   /**
    * Optional leading visual (any rendered node — react-core takes no icon dependency).
@@ -18,37 +21,6 @@ export interface EmptyStateProps {
   action?: ReactNode;
 }
 
-const wrapStyle: CSSProperties = {
-  display: "grid",
-  justifyItems: "center",
-  gap: "var(--space-3)",
-  padding: "var(--space-8) var(--space-6)",
-  textAlign: "center",
-  color: "var(--color-neutral-600)",
-  border: "1px dashed var(--color-neutral-300)",
-  borderRadius: "var(--radius-lg)",
-  background: "var(--color-neutral-0)",
-};
-
-const iconStyle: CSSProperties = {
-  color: "var(--color-neutral-400)",
-  display: "inline-flex",
-};
-
-const titleStyle: CSSProperties = {
-  margin: 0,
-  color: "var(--color-neutral-900)",
-  fontSize: "var(--font-size-base)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-};
-
-const descriptionStyle: CSSProperties = {
-  color: "var(--color-neutral-600)",
-  fontSize: "var(--font-size-sm)",
-  lineHeight: 1.5,
-  maxWidth: "36ch",
-};
-
 /**
  * The standard "nothing here yet" block: use whenever a query legitimately returns zero
  * rows, a module is not wired to data yet, or a feature is gated. One recognisable empty
@@ -58,15 +30,15 @@ const descriptionStyle: CSSProperties = {
 export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
   const resolve = useUiText();
   const leading = icon ?? (
-    <span style={iconStyle}>
+    <span data-terp="empty-state-icon">
       <Icon name="inbox" size="2rem" />
     </span>
   );
   return (
-    <div data-terp="empty-state" style={wrapStyle}>
+    <div data-terp="empty-state">
       {leading}
-      <p style={titleStyle}>{resolve(title)}</p>
-      {description !== undefined && <div style={descriptionStyle}>{description}</div>}
+      <p data-terp="empty-state-title">{resolve(title)}</p>
+      {description !== undefined && <div data-terp="empty-state-description">{description}</div>}
       {action}
     </div>
   );

package/src/ErrorState.tsx

@@ -1,10 +1,13 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { useErrorMessage } from "./errorMessages";
 import { Icon } from "./icons";
+import { injectTerpStyles } from "./styles";
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
 
+injectTerpStyles();
+
 /**
  * Best-effort human-readable message for a caught failure. `unwrap` already throws
  * `Error`s carrying the backend envelope's `detail`, so most callers just surface
@@ -47,37 +50,6 @@ export interface ErrorStateProps {
   action?: ReactNode;
 }
 
-const wrapStyle: CSSProperties = {
-  display: "grid",
-  justifyItems: "center",
-  gap: "var(--space-3)",
-  padding: "var(--space-6)",
-  textAlign: "center",
-  color: "var(--color-neutral-700)",
-  background: "var(--color-status-danger-soft)",
-  border: "1px solid var(--color-status-danger)",
-  borderRadius: "var(--radius-lg)",
-};
-
-const titleStyle: CSSProperties = {
-  margin: 0,
-  color: "var(--color-status-danger)",
-  fontSize: "var(--font-size-base)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-};
-
-const iconStyle: CSSProperties = {
-  color: "var(--color-status-danger)",
-  display: "inline-flex",
-};
-
-const descriptionStyle: CSSProperties = {
-  color: "var(--color-neutral-700)",
-  fontSize: "var(--font-size-sm)",
-  lineHeight: 1.5,
-  maxWidth: "48ch",
-};
-
 /**
  * The standard "something went wrong" block: use whenever a query fails (404 / 403 /
  * network) and the page frame is already rendered. Announced as an `alert` so assistive
@@ -93,15 +65,15 @@ export function ErrorState({ icon, title, description, error, action }: ErrorSta
     (error !== undefined ? (messageForCode(error) ?? describeError(error)) : null);
   const leading =
     icon ?? (
-      <span style={iconStyle}>
+      <span data-terp="error-state-icon">
         <Icon name="x" size="1.75rem" />
       </span>
     );
   return (
-    <div role="alert" data-terp="error-state" style={wrapStyle}>
+    <div role="alert" data-terp="error-state">
       {leading}
-      <p style={titleStyle}>{resolve(title ?? strings.errorTitle)}</p>
-      {message !== null && message !== undefined && <div style={descriptionStyle}>{message}</div>}
+      <p data-terp="error-state-title">{resolve(title ?? strings.errorTitle)}</p>
+      {message !== null && message !== undefined && <div data-terp="error-state-description">{message}</div>}
       {action}
     </div>
   );

package/src/Field.test.tsx

@@ -30,8 +30,65 @@ describe("Field", () => {
     );
     expect(screen.getByLabelText("Name")).toBeInTheDocument();
   });
+  it("points the control at its hint and its error, and marks it invalid", () => {
+    render(
+      <Field label="Email" hint="we never share it" error="required">
+        <Input defaultValue="" />
+      </Field>,
+    );
+    const input = screen.getByLabelText("Email");
+    // Text beside a control is invisible to a screen reader unless something points at it. The
+    // label needs no wiring because the control sits inside it; the hint and the error do.
+    const described = (input.getAttribute("aria-describedby") ?? "").split(" ").filter(Boolean);
+    expect(described).toHaveLength(2);
+    expect(described.map((id) => document.getElementById(id)?.textContent)).toEqual([
+      "we never share it",
+      "required",
+    ]);
+    // An error also opts the control into the sheet's invalid border, so the field does not
+    // depend on every caller remembering to pass aria-invalid alongside its error text.
+    expect(input).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("describes a hint with no error, and does not claim invalid", () => {
+    render(
+      <Field label="Name" hint="as it appears on the account">
+        <Input defaultValue="" />
+      </Field>,
+    );
+    const input = screen.getByLabelText("Name");
+    const id = input.getAttribute("aria-describedby");
+    expect(document.getElementById(id!)?.textContent).toBe("as it appears on the account");
+    expect(input).not.toHaveAttribute("aria-invalid");
+  });
+
+  it("adds no attributes when there is nothing to describe", () => {
+    render(
+      <Field label="Plain">
+        <Input defaultValue="" />
+      </Field>,
+    );
+    const input = screen.getByLabelText("Plain");
+    expect(input).not.toHaveAttribute("aria-describedby");
+    expect(input).not.toHaveAttribute("aria-invalid");
+  });
+
+  it("keeps a control's own aria-describedby and aria-invalid rather than replacing them", () => {
+    render(
+      <Field label="Email" hint="we never share it" error="required">
+        <Input defaultValue="" aria-describedby="caller-note" aria-invalid={false} />
+      </Field>,
+    );
+    const input = screen.getByLabelText("Email");
+    // The field appends; it does not clobber. And a control that deliberately says it is NOT
+    // invalid keeps saying so — the field supplies a default, not an override.
+    expect(input.getAttribute("aria-describedby")?.split(" ")[0]).toBe("caller-note");
+    expect(input.getAttribute("aria-describedby")?.split(" ")).toHaveLength(3);
+    expect(input).toHaveAttribute("aria-invalid", "false");
+  });
 });
 
+
 describe("Select / Textarea primitives", () => {
   it("render token-styled controls reachable by their Field label", () => {
     render(

package/src/Field.tsx

@@ -1,23 +1,11 @@
-import type { CSSProperties, ReactNode } from "react";
+import { cloneElement, isValidElement, useId } from "react";
+import type { ReactNode } from "react";
 
+import { injectTerpStyles } from "./styles";
 import { useUiText } from "./uiText";
 import type { UiText } from "./uiText";
 
-const fieldStyle: CSSProperties = { display: "grid", gap: "var(--space-1)" };
-const labelStyle: CSSProperties = {
-  fontWeight: "var(--font-weight-medium)" as never,
-  fontSize: "var(--font-size-sm)",
-  color: "var(--color-neutral-700)",
-};
-const hintStyle: CSSProperties = {
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-xs)",
-};
-const errorStyle: CSSProperties = {
-  color: "var(--color-status-danger)",
-  fontSize: "var(--font-size-xs)",
-  fontWeight: "var(--font-weight-medium)" as never,
-};
+injectTerpStyles();
 
 export interface FieldProps {
   /** The field label (also the control's accessible name — the control is wrapped in the `<label>`). */
@@ -35,17 +23,53 @@ export interface FieldProps {
  * id wiring) and renders an optional hint + a field-level error. Compose it with the token-styled
  * `Input` / `Select` / `Textarea` primitives to build a multi-field form — the centralized, accessible
  * way every module authors inputs.
+ *
+ * The label needs no wiring because the control sits inside it, but the hint and the error do: text
+ * beside a control is invisible to a screen reader unless something points at it. So the field
+ * gives each one an id and hands the control an `aria-describedby` — and, when there is an error, an
+ * `aria-invalid` that also opts the control into the sheet's invalid border. A control that already
+ * 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.
  */
 export function Field({ label, children, error, hint }: FieldProps) {
   const resolve = useUiText();
+  const baseId = useId();
+  const hasError = error !== undefined && error !== null;
+  const hintId = hint !== undefined ? `${baseId}-hint` : undefined;
+  const errorId = hasError ? `${baseId}-error` : undefined;
+  const described = [hintId, errorId].filter((id) => id !== undefined).join(" ");
+
+  // 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<{
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+  }>(children)
+    ? cloneElement(children, {
+        "aria-describedby": [children.props["aria-describedby"], described]
+          .filter((id) => id !== undefined && id !== "")
+          .join(" "),
+        "aria-invalid": children.props["aria-invalid"] ?? (hasError ? true : undefined),
+      })
+    : children;
+
   return (
-    <div style={fieldStyle}>
-      <label style={fieldStyle}>
-        <span style={labelStyle}>{resolve(label)}</span>
-        {children}
+    <div data-terp="field">
+      <label data-terp="field-label">
+        <span data-terp="field-label-text">{resolve(label)}</span>
+        {control}
       </label>
-      {hint !== undefined && <span style={hintStyle}>{hint}</span>}
-      {error !== undefined && error !== null && <span style={errorStyle}>{error}</span>}
+      {hint !== undefined && (
+        <span id={hintId} data-terp="field-hint">
+          {hint}
+        </span>
+      )}
+      {hasError && (
+        <span id={errorId} data-terp="field-error">
+          {error}
+        </span>
+      )}
     </div>
   );
 }

package/src/HubPage.test.tsx

@@ -18,7 +18,12 @@ describe("HubPage", () => {
     expect(screen.getByRole("heading", { level: 1, name: "Administration" })).toBeInTheDocument();
     expect(screen.queryByRole("navigation", { name: "Breadcrumb" })).not.toBeInTheDocument();
     expect(screen.getAllByText("Administration")).toHaveLength(1);
-    expect(screen.getByRole("list")).toHaveStyle({ gridAutoRows: "1fr" });
+    // The marker, not the declaration. jsdom does not compute the cascade, so toHaveStyle
+    // can only ever see an inline style — asserting gridAutoRows here was asserting that the
+    // grid is styled from a style object, which is the thing ADR 0094 removes. What a test
+    // should assert is the fact the sheet keys on; the geometry is gated by styles.test.ts
+    // (the rule exists) and by the hub-page baselines (it does what it says).
+    expect(screen.getByRole("list")).toHaveAttribute("data-terp", "hubpage-grid");
     expect(screen.getByRole("link", { name: /Users/ })).toBeInTheDocument();
     expect(screen.getByRole("link", { name: /Roles/ })).toBeInTheDocument();
     expect(screen.getByText("Manage accounts")).toBeInTheDocument();
@@ -91,18 +96,22 @@ describe("HubCard", () => {
       (title) => title.closest('[data-terp="hubcard-body"]'),
     );
     expect(bodies).toHaveLength(2);
-    for (const body of bodies) {
-      expect(body).toHaveStyle({
-        gridTemplateRows: "auto minmax(3rem, 1fr) auto",
-        minHeight: "10rem",
-      });
-    }
+    // What this test can actually establish, and it is the load-bearing half: both rows are
+    // PRESENT on the bare card, carrying a placeholder, so the body has three grid children
+    // either way. The equal-height claim is the tracks rule plus these placeholders, and the
+    // tracks rule is now in the sheet — gated by styles.test.ts for existence and by
+    // hub-card-bare, whose whole subject is a bare card sitting flush with a full one.
     const shortBody = bodies[0]!;
-    expect(shortBody.querySelector('[data-terp="hubcard-description"]')).toHaveStyle({
-      visibility: "hidden",
-    });
-    expect(shortBody.querySelector('[data-terp="hubcard-stat"]')).toHaveStyle({
-      visibility: "hidden",
-    });
+    const fullBody = bodies[1]!;
+    expect(shortBody.children).toHaveLength(fullBody.children.length);
+    // And the attribute the rule reads. Asserting visibility: hidden here asserted an inline
+    // style object; asserting data-empty asserts the fact, which is what survives the move.
+    for (const part of ["hubcard-description", "hubcard-stat"] as const) {
+      expect(shortBody.querySelector(`[data-terp="${part}"]`)).toHaveAttribute(
+        "data-empty",
+        "true",
+      );
+      expect(fullBody.querySelector(`[data-terp="${part}"]`)).not.toHaveAttribute("data-empty");
+    }
   });
 });