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/threejs-app.tsx

@@ -140,7 +140,7 @@ export default function ThreeJSApp({
   toolInputs,
   toolInputsPartial,
   toolResult: _toolResult,
-  hostContext: _hostContext,
+  hostContext,
   callServerTool: _callServerTool,
   sendMessage: _sendMessage,
   openLink: _openLink,
@@ -155,6 +155,14 @@ export default function ThreeJSApp({
   const partialCode = toolInputsPartial?.code;
   const isStreaming = !toolInputs && !!toolInputsPartial;
 
+  const safeAreaInsets = hostContext?.safeAreaInsets;
+  const containerStyle = {
+    paddingTop: safeAreaInsets?.top,
+    paddingRight: safeAreaInsets?.right,
+    paddingBottom: safeAreaInsets?.bottom,
+    paddingLeft: safeAreaInsets?.left,
+  };
+
   useEffect(() => {
     if (!code || !canvasRef.current || !containerRef.current) return;
 
@@ -166,11 +174,19 @@ export default function ThreeJSApp({
   }, [code, height]);
 
   if (isStreaming || !code) {
-    return <LoadingShimmer height={height} code={partialCode} />;
+    return (
+      <div style={containerStyle}>
+        <LoadingShimmer height={height} code={partialCode} />
+      </div>
+    );
   }
 
   return (
-    <div ref={containerRef} className="threejs-container">
+    <div
+      ref={containerRef}
+      className="threejs-container"
+      style={containerStyle}
+    >
       <canvas
         ref={canvasRef}
         style={{