Add safeAreaInsets support to all example apps (#202)

Apply host-provided safe area insets as padding on main containers
across all examples. This ensures content doesn't render under
system UI elements like phone notches.

React apps use `useState` + `onhostcontextchanged` handler with
initial fetch via `getHostContext()` in `useEffect`. Vanilla JS
apps apply padding in the handler and invoke it after `connect()`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

examples/threejs-server/src/mcp-app-wrapper.tsx

@@ -7,7 +7,7 @@
 import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
 import { useApp } from "@modelcontextprotocol/ext-apps/react";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
-import { StrictMode, useState, useCallback } from "react";
+import { StrictMode, useState, useCallback, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import ThreeJSApp from "./threejs-app.tsx";
 import "./global.css";
@@ -67,11 +67,21 @@ function McpAppWrapper() {
       };
       // Host context changes (theme, dimensions, etc.)
       app.onhostcontextchanged = (params) => {
-        setHostContext(params);
+        setHostContext((prev) => ({ ...prev, ...params }));
       };
     },
   });
 
+  // Get initial host context after connection
+  useEffect(() => {
+    if (app) {
+      const ctx = app.getHostContext();
+      if (ctx) {
+        setHostContext(ctx);
+      }
+    }
+  }, [app]);
+
   // Memoized callbacks that forward to app methods
   const callServerTool = useCallback<App["callServerTool"]>(
     (params, options) => app!.callServerTool(params, options),