feat(mobile): add MobileLayoutProvider context + useMobileChrome hook

src/components/layout/mobile/mobile-layout-provider.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
+
+type MobileChromeState = {
+  title: string | null;
+  primaryAction: ReactNode | null;
+  showBackButton: boolean;
+};
+
+type MobileChromeApi = MobileChromeState & {
+  setChrome: (next: Partial<MobileChromeState>) => void;
+};
+
+const MobileChromeContext = createContext<MobileChromeApi | null>(null);
+
+export function MobileLayoutProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<MobileChromeState>({
+    title: null,
+    primaryAction: null,
+    showBackButton: false,
+  });
+
+  const value = useMemo<MobileChromeApi>(
+    () => ({
+      ...state,
+      setChrome: (next) => setState((prev) => ({ ...prev, ...next })),
+    }),
+    [state],
+  );
+
+  return <MobileChromeContext.Provider value={value}>{children}</MobileChromeContext.Provider>;
+}
+
+/**
+ * Page-level hook to push a title / back-button / primary action into the
+ * mobile topbar. The provider is only mounted by `<MobileLayout>`, so
+ * desktop-shell renders never call into this context.
+ */
+export function useMobileChrome() {
+  const ctx = useContext(MobileChromeContext);
+  if (!ctx) {
+    throw new Error('useMobileChrome must be used inside <MobileLayoutProvider>');
+  }
+  return ctx;
+}