npm - @terpjs/react-core - Versions diffs - 0.6.1 → 0.8.0 - Mend

@terpjs/react-core 0.6.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/README.md +12 -2
package/package.json +2 -2
package/src/AppShell.test.tsx +33 -12
package/src/AppShell.tsx +69 -249
package/src/Breadcrumbs.test.tsx +24 -0
package/src/Breadcrumbs.tsx +9 -32
package/src/ConfirmDialog.tsx +13 -44
package/src/EmptyState.tsx +8 -36
package/src/ErrorState.tsx +8 -36
package/src/Field.test.tsx +57 -0
package/src/Field.tsx +46 -22
package/src/HubPage.test.tsx +22 -13
package/src/HubPage.tsx +25 -97
package/src/LoadingState.tsx +3 -24
package/src/ModuleNav.tsx +1 -1
package/src/PageActions.tsx +5 -10
package/src/UserMenu.test.tsx +12 -5
package/src/UserMenu.tsx +33 -62
package/src/dataview/DataView.test.tsx +109 -5
package/src/dataview/DataView.tsx +41 -23
package/src/dataview/DataViewCardList.tsx +14 -60
package/src/dataview/DataViewColumnSettings.tsx +46 -51
package/src/dataview/DataViewExpandableRow.tsx +2 -17
package/src/dataview/DataViewPagination.tsx +2 -32
package/src/dataview/DataViewRowActions.tsx +13 -33
package/src/dataview/DataViewTable.tsx +16 -103
package/src/dataview/DataViewToolbar.tsx +53 -76
package/src/dataview/README.md +6 -0
package/src/dataview/index.ts +1 -0
package/src/dataview/internal.tsx +4 -1
package/src/dataview/types.ts +13 -0
package/src/feedback.test.tsx +26 -0
package/src/files.test.tsx +18 -0
package/src/files.tsx +13 -4
package/src/icons.test.tsx +10 -6
package/src/icons.tsx +33 -37
package/src/index.ts +0 -3
package/src/layout.test.tsx +24 -9
package/src/layout.tsx +24 -21
package/src/layoutContract.test.tsx +95 -0
package/src/locale.tsx +27 -4
package/src/markers.test.ts +468 -0
package/src/raw.d.ts +15 -1
package/src/router.tsx +6 -9
package/src/ssr.test.tsx +1 -3
package/src/styles.test.ts +823 -6
package/src/styles.ts +2699 -153
package/src/theme.test.tsx +39 -0
package/src/theme.themes.test.ts +124 -0
package/src/theme.tsx +62 -14
package/src/toast.tsx +35 -71
package/src/tokens.guard.test.ts +3 -12
package/src/ui/Alert.test.tsx +12 -0
package/src/ui/Alert.tsx +15 -43
package/src/ui/Badge.test.tsx +14 -3
package/src/ui/Badge.tsx +13 -25
package/src/ui/Button.test.tsx +17 -4
package/src/ui/Button.tsx +10 -63
package/src/ui/Card.test.tsx +6 -2
package/src/ui/Card.tsx +11 -39
package/src/ui/Checkbox.tsx +2 -19
package/src/ui/Combobox.test.tsx +22 -0
package/src/ui/Combobox.tsx +31 -80
package/src/ui/DatePicker.test.tsx +131 -4
package/src/ui/DatePicker.tsx +158 -106
package/src/ui/Input.tsx +6 -19
package/src/ui/Markdown.test.tsx +26 -0
package/src/ui/Markdown.tsx +28 -2
package/src/ui/Menu.test.tsx +38 -4
package/src/ui/Menu.tsx +50 -52
package/src/ui/Popover.tsx +53 -19
package/src/ui/Radio.tsx +5 -30
package/src/ui/Select.tsx +7 -30
package/src/ui/Switch.tsx +2 -20
package/src/ui/Tabs.tsx +4 -28
package/src/ui/Textarea.tsx +6 -17
package/src/ui/Tooltip.tsx +9 -21
package/src/uiText.tsx +9 -0
package/src/ui/controlStyles.ts +0 -9

package/README.md CHANGED Viewed

@@ -20,7 +20,17 @@ JSDoc, so your editor shows the same guidance inline. **Never deep-import** from
   or `useRealtimeChannel()` for typed SSE/WebSocket subscriptions. The hook mints a
   one-use connection ticket through the generated client; bearer tokens never enter URLs.
 - **Design tokens, not inline colours** — style with the CSS variables from
-  `@terpjs/contract` (`var(--color-*)`, `var(--space-*)`, `var(--font-*)`).
+  `@terpjs/contract` (`var(--color-*)`, `var(--space-*)`, `var(--font-*)`). The full list,
+  with each token's per-theme values and the foreground/background pairings the contrast gate
+  enforces, is published as `@terpjs/contract/tokens.manifest.json` — read it rather than
+  inferring names from the compiled sheet.
+- **The accent is two tokens, and mixing them up is a contrast bug.**
+  `--color-brand-primary` is the accent as a *filled surface*, and the only thing that may sit
+  on it is `--color-brand-primary-contrast`. `--color-fg-accent` is the accent as *ink or a
+  boundary* against one of the app's own surfaces — accent text, a selected-tab underline, a
+  focus ring, a checkbox's `accent-color`. One token cannot do both: in a dark theme the
+  surface use needs a value dark enough to hold a white label and the ink use needs one light
+  enough to read on a dark canvas, and there is no value satisfying both.
 - **User-facing text is `UiText`** — every text prop accepts a plain string or an
   `{id, message}` descriptor, so apps can localize via `UiTextProvider` without
   react-core taking an i18n dependency.
@@ -43,7 +53,7 @@ JSDoc, so your editor shows the same guidance inline. **Never deep-import** from
 | `LoginView` | The standard sign-in screen: username/password, plus optional SSO provider buttons via `ssoProviders` and a dev-only credential-fill button via `devCredentials` (gate it on `import.meta.env.DEV`). |
 | `useSso`, `parseSsoCallback`, `fetchSsoAuthorizationUrl`, `completeSsoCallback` | The SSO login seam (ADR 0058): `useSso().begin(provider)` opens an OIDC flow; `TerpProvider` completes the `/auth/callback/{provider}` redirect landing into a normal session on boot. `renderTerpApp({ ssoProviders })` wires the buttons in one line. |
 | `RequireAuth` | Renders children only with a session; pairs with the router so the app mounts only when signed in. |
-| `ThemeProvider`, `ThemeToggle`, `useTheme` | Light/dark/system theming: applies `data-theme` on `<html>` (the token stylesheet carries both palettes) and persists the choice. `renderTerpApp` mounts it for every app; the shell header uses an icon-only, token-themed `variant="inline"` menu. |
+| `ThemeProvider`, `ThemeToggle`, `useTheme` | Theming over the five shipped palettes — `light`, `dark`, `midnight`, `twilight`, `contrast` — plus `system` to follow the OS preference. Applies `data-theme` on `<html>` (the token stylesheet carries every palette) and persists the choice. `defaultTheme` is how an app ships on a named theme. `renderTerpApp` mounts it for every app; the shell header uses an icon-only, token-themed `variant="inline"` menu. |
 | `LocaleProvider`, `LanguageSwitcher`, `useLocale`, `LOCALE_EN`, `LOCALE_NL` | The language seam over `UiTextProvider`: per-locale string catalogs, a persisted active locale, and an icon-only, token-themed menu in the shell header once an app declares a second locale. English and Dutch catalogs ship complete; `renderTerpApp({ locales })` wires them. |
 | `UserMenu`, `userInitials` | The signed-in user's menu, pinned by `buildAppRouter` to the bottom of the sidebar: an initials avatar trigger opening the identity block, **Settings** (the built-in profile page) and sign-out. Collapses to the avatar in the icon rail. |
 | `ProfileView` | The built-in profile / settings page (`/profile`): the server-validated identity, theme + language preferences, and sign-out. |

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@terpjs/react-core",
-  "version": "0.6.1",
+  "version": "0.8.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.6.1"
+    "@terpjs/contract": "^0.8.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/AppShell.test.tsx CHANGED Viewed

@@ -21,9 +21,7 @@ function renderShell(extra?: Partial<Parameters<typeof AppShell>[0]>) {
     <AppShell
       title="Terp"
       nav={nav}
-      renderLink={(item, children, context) => (
-        <a href={item.to} style={context.style}>{children}</a>
-      )}
+      renderLink={(item, children) => <a href={item.to}>{children}</a>}
       navFooter={<p>pinned footer</p>}
       {...extra}
     >
@@ -74,12 +72,18 @@ describe("AppShell", () => {
     expect(screen.getByRole("link", { name: "Notes" })).toBeInTheDocument();
     expect(screen.getByText("U")).toBeInTheDocument(); // Users' fallback initial tile
     const navigation = screen.getByRole("navigation", { name: "Primary" });
-    expect(navigation).toHaveAttribute("data-collapsed", "true");
+    // data-collapsed is on the SIDEBAR, not on the nav. One fact, one owner: the rail decides
+    // the sidebar's width, the brand's centring, the nav's scrollbar and both hidden labels, so
+    // every rule that reads it descends from the element that owns it.
+    const sidebar = navigation.closest('[data-terp="appshell-sidebar"]');
+    expect(sidebar).toHaveAttribute("data-collapsed", "true");
     expect(navigation.querySelectorAll('[data-terp="nav-icon"]')).toHaveLength(2);
-    expect(screen.getByRole("link", { name: "Notes" })).toHaveStyle({
-      justifyContent: "center",
-      width: "100%",
-    });
+    // The link's collapsed geometry is a rule now, keyed on that attribute — asserting
+    // toHaveStyle here asserted that the shell hands a style object to the caller's link
+    // renderer, which is the thing this migration removed. jsdom computes no cascade, so the
+    // fact is what a unit test can hold; the geometry is gated by styles.test.ts and by the
+    // app-shell-collapsed baseline.
+    expect(screen.getByRole("link", { name: "Notes" })).not.toHaveAttribute("style");
     expect(screen.getByText("rail")).toBeInTheDocument();
     expect(window.localStorage.getItem(SIDEBAR_STORAGE_KEY)).toBe("collapsed");
     expect(screen.getByRole("button", { name: "Expand sidebar" })).toBeInTheDocument();
@@ -89,13 +93,30 @@ describe("AppShell", () => {
     window.localStorage.setItem(SIDEBAR_STORAGE_KEY, "collapsed");
     renderShell();
     expect(screen.getByRole("link", { name: "Notes" })).toBeInTheDocument();
-    expect(screen.getByRole("navigation", { name: "Primary" })).toHaveAttribute(
-      "data-collapsed",
-      "true",
-    );
+    expect(
+      screen.getByRole("navigation", { name: "Primary" }).closest('[data-terp="appshell-sidebar"]'),
+    ).toHaveAttribute("data-collapsed", "true");
     expect(screen.getByRole("button", { name: "Expand sidebar" })).toBeInTheDocument();
   });
+  it("starts collapsed on defaultCollapsed, and a stored choice still wins", () => {
+    // The rail was internal state with no way in, which is why four rules that apply only to it
+    // were painted by nothing. Reading the key with `=== "collapsed"` also treated an absent key
+    // and an explicit "expanded" as the same thing, so the fallback had to become a null check.
+    renderShell({ defaultCollapsed: true });
+    expect(
+      screen.getByRole("navigation", { name: "Primary" }).closest('[data-terp="appshell-sidebar"]'),
+    ).toHaveAttribute("data-collapsed", "true");
+    cleanup();
+    window.localStorage.setItem(SIDEBAR_STORAGE_KEY, "expanded");
+    renderShell({ defaultCollapsed: true });
+    expect(
+      screen.getByRole("navigation", { name: "Primary" }).closest('[data-terp="appshell-sidebar"]'),
+      "an explicit stored choice must beat defaultCollapsed, in both directions",
+    ).not.toHaveAttribute("data-collapsed");
+  });
   it("renders a custom logo and footer in their slots", () => {
     renderShell({ logo: <span>MyMark</span>, footer: <span>v1.2.3</span> });
     expect(screen.getByText("MyMark")).toBeInTheDocument();

package/src/AppShell.tsx CHANGED Viewed

@@ -1,12 +1,11 @@
 import type { NavItem } from "@terpjs/contract";
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Icon, NavIcon, TerpMark } from "./icons";
 import { LanguageSwitcher } from "./locale";
 import { injectTerpStyles } from "./styles";
 import { ThemeToggle } from "./theme";
-import { CONTROL_TEXT_STYLE } from "./ui/controlStyles";
 import { useStrings, useUiText } from "./uiText";
 import type { UiText } from "./uiText";
@@ -17,16 +16,18 @@ export interface AppShellSlotContext {
   collapsed: boolean;
 }
-export interface AppShellLinkContext extends AppShellSlotContext {
-  style: CSSProperties;
-  activeStyle: CSSProperties;
-}
+/**
+ * What a link renderer is told about the shell it is rendering into.
+ *
+ * It used to carry `style` and `activeStyle` for the caller to spread, which made the
+ * shell's link geometry a style object handed across a public boundary — unthemeable by
+ * an app, and duplicated by every stack. The sheet owns that geometry now, keyed on
+ * `[data-terp="appshell-nav"] a` and on `aria-current="page"` for the active route, so a
+ * renderer needs to return nothing but its stack's link (ADR 0094).
+ */
+export type AppShellLinkContext = AppShellSlotContext;
-export type RenderBrandLink = (props: {
-  to: string;
-  children: ReactNode;
-  style: CSSProperties;
-}) => ReactNode;
+export type RenderBrandLink = (props: { to: string; children: ReactNode }) => ReactNode;
 export interface AppShellProps {
   /** Product / app title shown next to the logo at the top of the sidebar. */
@@ -35,10 +36,10 @@ export interface AppShellProps {
   nav: readonly NavItem[];
   /**
    * Turns a nav item into the active stack's link around the shell-styled
-   * `children` (icon + label), keeping the shell router-agnostic. Spread
-   * `context.style` (and `context.activeStyle` on the active route) onto the
-   * link element — the shell owns the expanded/collapsed link geometry, so
-   * every stack's links look identical in both rail states.
+   * `children` (icon + label), keeping the shell router-agnostic. Return the
+   * stack's link and nothing else: the shell owns the expanded and collapsed
+   * link geometry from its stylesheet, and the active route's treatment is
+   * keyed on `aria-current="page"`, which every router sets.
    */
   renderLink: (item: NavItem, children: ReactNode, context: AppShellLinkContext) => ReactNode;
   /** Turns the product brand into the home link; defaults to a plain anchor to `/`. */
@@ -51,6 +52,16 @@ export interface AppShellProps {
   navFooter?: ReactNode | ((context: AppShellSlotContext) => ReactNode);
   /** Footer line under the content; default: a muted line with the app title. */
   footer?: ReactNode;
+  /**
+   * Start with the desktop sidebar collapsed to its icon rail, when no choice has been
+   * persisted yet. The user's own toggle still wins and still persists.
+   *
+   * It exists for the same reason `Menu` and both date pickers take `defaultOpen`: the
+   * rail is internal state read from `localStorage`, so without a way in it can be
+   * rendered by no specimen and no test, and every rule that only applies to it is
+   * unpainted. Four were.
+   */
+  defaultCollapsed?: boolean;
   /** The routed page content. */
   children: ReactNode;
 }
@@ -61,42 +72,6 @@ export const SIDEBAR_STORAGE_KEY = "terp.sidebar";
 /** Below this width the sidebar becomes an overlay drawer (matches DataView's card cutover). */
 const MOBILE_BREAKPOINT = "(max-width: 768px)";
-const EXPANDED_WIDTH = "15rem";
-const COLLAPSED_WIDTH = "4rem";
-/** Base style for sidebar links — spread onto the stack's link element. */
-export const NAV_LINK_STYLE: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  padding: "var(--space-2) var(--space-3)",
-  borderRadius: "var(--radius-md)",
-  color: "var(--color-neutral-700)",
-  fontSize: "var(--font-size-sm)",
-  fontWeight: "var(--font-weight-medium)" as CSSProperties["fontWeight"],
-  textDecoration: "none",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  boxSizing: "border-box",
-  minHeight: "2.25rem",
-  transition: "background-color 150ms ease, color 150ms ease",
-};
-/** Collapsed rail geometry: one centered fixed-size icon inside the 2.5rem content track. */
-export const NAV_LINK_COLLAPSED_STYLE: CSSProperties = {
-  justifyContent: "center",
-  gap: 0,
-  padding: "var(--space-2)",
-  width: "100%",
-};
-/** Merged over {@link NAV_LINK_STYLE} on the active route's link. */
-export const NAV_LINK_ACTIVE_STYLE: CSSProperties = {
-  background: "var(--color-brand-primary-soft)",
-  color: "var(--color-brand-primary)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-};
 function useIsMobile(): boolean {
   const [isMobile, setIsMobile] = useState(
     () =>
@@ -116,175 +91,27 @@ function useIsMobile(): boolean {
   return isMobile;
 }
-function readStoredCollapsed(): boolean {
+/**
+ * The persisted rail choice, falling back to `defaultCollapsed` when nothing is stored.
+ *
+ * The null check is the whole point and it is new: reading `=== "collapsed"` treated an
+ * absent key and an explicit "expanded" as the same thing, so a `defaultCollapsed` shell
+ * could never start collapsed. A stored choice still wins in both directions.
+ */
+function readStoredCollapsed(fallback: boolean): boolean {
   if (typeof window === "undefined") {
-    return false;
+    return fallback;
   }
   try {
-    return window.localStorage.getItem(SIDEBAR_STORAGE_KEY) === "collapsed";
+    const stored = window.localStorage.getItem(SIDEBAR_STORAGE_KEY);
+    return stored === null ? fallback : stored === "collapsed";
   } catch {
-    return false;
+    return fallback;
   }
 }
-const shellStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "stretch",
-  minHeight: "100vh",
-  fontFamily: "var(--font-family-sans)",
-  color: "var(--color-neutral-900)",
-  background: "var(--color-neutral-50)",
-};
-const sidebarStyle: CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: "var(--space-4)",
-  padding: "var(--space-3)",
-  boxSizing: "border-box",
-  flexShrink: 0,
-  position: "sticky",
-  top: 0,
-  height: "100vh",
-  overflowX: "hidden",
-  background: "var(--color-neutral-0)",
-  borderRight: "1px solid var(--color-neutral-200)",
-  transition: "width 150ms ease",
-};
-const drawerStyle: CSSProperties = {
-  ...sidebarStyle,
-  position: "fixed",
-  inset: "0 auto 0 0",
-  height: "100dvh",
-  width: EXPANDED_WIDTH,
-  zIndex: 50,
-  boxShadow: "var(--shadow-lg)",
-};
-const backdropStyle: CSSProperties = {
-  position: "fixed",
-  inset: 0,
-  zIndex: 40,
-  background: "rgb(0 0 0 / 0.4)",
-};
-const brandStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  padding: "var(--space-1) var(--space-2)",
-  minHeight: "2.25rem",
-};
-const brandLinkStyle: CSSProperties = {
-  ...brandStyle,
-  color: "var(--color-neutral-900)",
-  textDecoration: "none",
-  borderRadius: "var(--radius-md)",
-  boxSizing: "border-box",
-};
-const drawerBrandRowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-};
-const brandTitleStyle: CSSProperties = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  fontSize: "var(--font-size-base)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-  color: "var(--color-neutral-900)",
-  letterSpacing: 0,
-};
-const navItemLabelStyle: CSSProperties = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-};
-const visuallyHiddenStyle: CSSProperties = {
-  position: "absolute",
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-};
-const navStyle: CSSProperties = { flexGrow: 1, overflowY: "auto", minHeight: 0 };
-const listStyle: CSSProperties = {
-  listStyle: "none",
-  margin: 0,
-  padding: 0,
-  display: "grid",
-  gap: "var(--space-1)",
-};
-const columnStyle: CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1,
-  minWidth: 0,
-};
-const headerStyle: CSSProperties = {
-  position: "sticky",
-  top: 0,
-  zIndex: 30,
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "var(--space-3)",
-  padding: "var(--space-2) var(--space-4)",
-  minHeight: "3rem",
-  boxSizing: "border-box",
-  background: "var(--color-neutral-0)",
-  borderBottom: "1px solid var(--color-neutral-200)",
-};
-const headerGroupStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-};
-const mainStyle: CSSProperties = { flexGrow: 1, padding: "var(--space-6)", minWidth: 0 };
-const mainMobileStyle: CSSProperties = { ...mainStyle, padding: "var(--space-4)" };
-const footerStyle: CSSProperties = {
-  padding: "var(--space-3) var(--space-6)",
-  borderTop: "1px solid var(--color-neutral-200)",
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-xs)",
-};
-const toggleStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "2.25rem",
-  height: "2.25rem",
-  padding: 0,
-  color: "var(--color-neutral-700)",
-  background: "transparent",
-  border: "1px solid transparent",
-  borderRadius: "var(--radius-md)",
-  cursor: "pointer",
-};
-const defaultRenderBrandLink: RenderBrandLink = ({ to, children, style }) => (
-  <a href={to} data-terp="appshell-brand" style={style}>
+const defaultRenderBrandLink: RenderBrandLink = ({ to, children }) => (
+  <a href={to} data-terp="appshell-brand">
     {children}
   </a>
 );
@@ -331,12 +158,13 @@ export function AppShell({
   headerActions,
   navFooter,
   footer,
+  defaultCollapsed = false,
   children,
 }: AppShellProps) {
   const resolve = useUiText();
   const strings = useStrings();
   const isMobile = useIsMobile();
-  const [collapsed, setCollapsed] = useState(readStoredCollapsed);
+  const [collapsed, setCollapsed] = useState(() => readStoredCollapsed(defaultCollapsed));
   const [drawerOpen, setDrawerOpen] = useState(false);
   const drawerRef = useRef<HTMLElement>(null);
   const drawerCloseRef = useRef<HTMLButtonElement>(null);
@@ -399,24 +227,27 @@ export function AppShell({
   // The drawer always shows labels; the desktop rail hides them when collapsed.
   const railCollapsed = !isMobile && collapsed;
   const context: AppShellSlotContext = { collapsed: railCollapsed };
-  const linkStyle = railCollapsed
-    ? { ...NAV_LINK_STYLE, ...NAV_LINK_COLLAPSED_STYLE }
-    : NAV_LINK_STYLE;
+  // Hoisted, the density-attribute idiom: the marker scanner reads a whole expression
+  // container, so a conditional written at the attribute reports every literal in it as a
+  // marker name.
+  const collapsedAttribute = railCollapsed ? "true" : undefined;
+  // One attribute for the viewport, on the shell root, and every consequence of it descends
+  // from there: the sidebar becomes a drawer, main tightens its padding. The breakpoint stays
+  // in one place — this component's media query — rather than being restated as a CSS
+  // @media rule that could drift from it.
+  const shellVariant = isMobile ? "mobile" : "desktop";
   const resolvedTitle = resolve(title);
+  // The brand takes no style object and needs none: its three looks are the resting one,
+  // the collapsed one (reached from the sidebar's data-collapsed) and the mobile one
+  // (reached from the drawer's brand row, which only exists on mobile). The DOM already
+  // says which it is.
   const brand = renderBrandLink({
     to: "/",
-    style: railCollapsed
-      ? { ...brandLinkStyle, justifyContent: "center", paddingInline: 0 }
-      : isMobile
-        ? { ...brandLinkStyle, flex: 1, minWidth: 0 }
-        : brandLinkStyle,
     children: (
       <>
         {logo ?? <TerpMark />}
-        <strong style={railCollapsed ? visuallyHiddenStyle : brandTitleStyle}>
-          {resolvedTitle}
-        </strong>
+        <strong data-terp="appshell-brand-title">{resolvedTitle}</strong>
       </>
     ),
   });
@@ -429,23 +260,19 @@ export function AppShell({
       aria-label={isMobile ? strings.primaryNavigationLabel : undefined}
       tabIndex={isMobile ? -1 : undefined}
       onKeyDown={isMobile ? onDrawerKeyDown : undefined}
-      style={
-        isMobile
-          ? drawerStyle
-          : { ...sidebarStyle, width: railCollapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH }
-      }
+      data-terp="appshell-sidebar"
+      data-collapsed={collapsedAttribute}
     >
       {isMobile && (
         <span
           data-terp="drawer-focus-start"
           tabIndex={0}
-          style={visuallyHiddenStyle}
           onFocus={() => focusDrawerEdge("last")}
         />
       )}
       {isMobile ? (
         <div
-          style={drawerBrandRowStyle}
+          data-terp="appshell-brand-row"
           onClick={(event) => {
             if (event.target instanceof Element && event.target.closest("a") !== null) {
               closeDrawer();
@@ -458,7 +285,6 @@ export function AppShell({
             type="button"
             data-terp="iconbutton"
             aria-label={strings.closeNavigation}
-            style={toggleStyle}
             onClick={closeDrawer}
           >
             <Icon name="x" size="1.15rem" />
@@ -466,24 +292,20 @@ export function AppShell({
         </div>
       ) : brand}
       <nav
-        style={navStyle}
         data-terp="appshell-nav"
-        data-collapsed={railCollapsed || undefined}
         aria-label={strings.primaryNavigationLabel}
         onClick={isMobile ? closeDrawer : undefined}
       >
-        <ul style={listStyle}>
+        <ul data-terp="appshell-nav-list">
           {nav.map((item) => (
             <li key={item.to} title={railCollapsed ? item.label : undefined}>
               {renderLink(
                 item,
                 <>
                   <NavIcon name={item.icon} label={item.label} />
-                  <span style={railCollapsed ? visuallyHiddenStyle : navItemLabelStyle}>
-                    {item.label}
-                  </span>
+                  <span data-terp="appshell-nav-label">{item.label}</span>
                 </>,
-                { collapsed: railCollapsed, style: linkStyle, activeStyle: NAV_LINK_ACTIVE_STYLE },
+                { collapsed: railCollapsed },
               )}
             </li>
           ))}
@@ -494,7 +316,6 @@ export function AppShell({
         <span
           data-terp="drawer-focus-end"
           tabIndex={0}
-          style={visuallyHiddenStyle}
           onFocus={() => focusDrawerEdge("first")}
         />
       )}
@@ -502,13 +323,13 @@ export function AppShell({
   );
   return (
-    <div style={shellStyle}>
+    <div data-terp="appshell" data-variant={shellVariant}>
       {isMobile ? (
         drawerOpen && (
           <>
             {/* Click-away surface only: Escape and the labelled header toggle are the
                 accessible close paths, so the backdrop stays out of the a11y tree. */}
-            <div aria-hidden="true" style={backdropStyle} onClick={closeDrawer} />
+            <div aria-hidden="true" data-terp="appshell-backdrop" onClick={closeDrawer} />
             {sidebar}
           </>
         )
@@ -516,16 +337,15 @@ export function AppShell({
         sidebar
       )}
       <div
-        style={columnStyle}
+        data-terp="appshell-column"
         inert={isMobile && drawerOpen ? true : undefined}
         aria-hidden={isMobile && drawerOpen ? true : undefined}
       >
-        <header style={headerStyle}>
+        <header data-terp="appshell-header">
           <button
             ref={toggleRef}
             type="button"
             data-terp="iconbutton"
-            style={toggleStyle}
             aria-expanded={isMobile ? drawerOpen : !collapsed}
             aria-label={
               isMobile
@@ -540,14 +360,14 @@ export function AppShell({
           >
             <PanelIcon />
           </button>
-          <div style={headerGroupStyle}>
+          <div data-terp="appshell-header-group">
             {headerActions}
             <ThemeToggle variant="inline" />
             <LanguageSwitcher variant="inline" />
           </div>
         </header>
-        <main style={isMobile ? mainMobileStyle : mainStyle}>{children}</main>
-        <footer style={footerStyle}>{footer ?? <small>{resolvedTitle}</small>}</footer>
+        <main data-terp="appshell-main">{children}</main>
+        <footer data-terp="appshell-footer">{footer ?? <small>{resolvedTitle}</small>}</footer>
       </div>
     </div>
   );

package/src/Breadcrumbs.test.tsx CHANGED Viewed

@@ -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);
+  });
 });