Phase 5 cleanup

packages/web/src/components/layout/SetPageHeader.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+import { usePageHeader } from './PageHeaderContext';
+
+interface SetPageHeaderProps {
+  title: string;
+  subtitle?: string;
+  crumbs?: string[];
+  actions?: ReactNode;
+}
+
+/**
+ * Call inside a page component to set the TopBar's title/subtitle/crumbs.
+ * Renders a visually-hidden heading for accessibility and tests.
+ */
+export function SetPageHeader({ title, subtitle, crumbs, actions }: SetPageHeaderProps) {
+  const { setHeader } = usePageHeader();
+  useEffect(() => {
+    setHeader({ title, subtitle, crumbs, actions });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [title, subtitle, crumbs?.join(',')]);
+  return (
+    <h1
+      aria-hidden="false"
+      style={{
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0,0,0,0)',
+        whiteSpace: 'nowrap',
+        border: 0,
+      }}
+    >
+      {title}
+    </h1>
+  );
+}