Add page header level modifiers

Author: pallyoung

packages/web/src/features/shared/components/mobile-page-header.test.tsx

@@ -17,8 +17,20 @@ describe("MobilePageHeader", () => {
     const leading = header?.querySelector(".page-header__leading");
 
     expect(header).not.toBeNull();
+    expect(header).toHaveClass("page-header--secondary");
+    expect(header).toHaveAttribute("data-level", "secondary");
     expect(leading).not.toBeNull();
     expect(within(leading as HTMLElement).getByText("Open Workspace")).toBeInTheDocument();
     expect(screen.queryByText("WORKSPACE")).not.toBeInTheDocument();
   });
+
+  it("passes the requested level through without showing the kicker by default", () => {
+    render(<MobilePageHeader title="Launch Task" kicker="Agent" level="primary" />);
+
+    const header = document.querySelector(".mobile-page-header");
+
+    expect(header).toHaveClass("page-header--primary");
+    expect(header).toHaveAttribute("data-level", "primary");
+    expect(screen.queryByText("Agent")).not.toBeInTheDocument();
+  });
 });

packages/web/src/features/shared/components/page-header.test.tsx

@@ -17,6 +17,8 @@ describe("PageHeader", () => {
     const leading = header?.querySelector(".page-header__leading");
     const actions = header?.querySelector(".page-header__actions");
 
+    expect(header).toHaveClass("page-header--secondary");
+    expect(header).toHaveAttribute("data-level", "secondary");
     expect(leading).not.toBeNull();
     expect(actions).not.toBeNull();
     expect(
@@ -38,4 +40,14 @@ describe("PageHeader", () => {
     expect(within(copy as HTMLElement).getByText("Config")).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Edit" })).not.toBeInTheDocument();
   });
+
+  it("renders stable primary level hooks for shared styling", () => {
+    render(<PageHeader title="Workspace Settings" level="primary" />);
+
+    const header = document.querySelector(".page-header");
+
+    expect(header).toHaveClass("page-header--primary");
+    expect(header).toHaveAttribute("data-level", "primary");
+    expect(header).not.toHaveClass("page-header--secondary");
+  });
 });

packages/web/src/features/shared/components/page-header.tsx

@@ -3,6 +3,7 @@ import { ArrowLeft } from "lucide-react";
 import type { ReactNode } from "react";
 
 type PageHeaderTitleElement = "div" | "h1" | "h2" | "h3" | "span";
+type PageHeaderLevel = "primary" | "secondary";
 
 export interface PageHeaderProps {
   title: string;
@@ -12,6 +13,7 @@ export interface PageHeaderProps {
   kicker?: ReactNode;
   rightSlot?: ReactNode;
   titleAs?: PageHeaderTitleElement;
+  level?: PageHeaderLevel;
   className?: string;
 }
 
@@ -23,12 +25,13 @@ export function PageHeader({
   kicker,
   rightSlot,
   titleAs = "h2",
+  level = "secondary",
   className,
 }: PageHeaderProps) {
   const TitleTag = titleAs;
 
   return (
-    <div className={clsx("page-header", className)}>
+    <div className={clsx("page-header", `page-header--${level}`, className)} data-level={level}>
       <div className="page-header__leading">
         {onBack ? (
           <button

packages/web/src/styles/components.css

@@ -671,6 +671,11 @@
   color: var(--text-tertiary);
 }
 
+.page-header--primary .page-header__kicker {
+  font-size: var(--text-sm);
+  letter-spacing: 0.1em;
+}
+
 .page-header__title {
   margin: 0;
   max-width: 100%;
@@ -683,6 +688,15 @@
   text-align: left;
 }
 
+.page-header--primary .page-header__title {
+  font-size: var(--text-lg);
+  line-height: 1.1;
+}
+
+.page-header--secondary .page-header__title {
+  line-height: 1.25;
+}
+
 .page-header__back {
   display: inline-flex;
   align-items: center;