Improve consistency and organization of examples for AI learning

- Add `.gitignore` files to all 19 examples (`node_modules/`, `dist/`)
- Replace custom `log` objects with standard `console` methods
- Add `ontoolcancelled` handler to all `basic-server-*` examples
- Add host styling integration (`applyDocumentTheme`, `applyHostFonts`,
  `applyHostStyleVariables`) to non-React `basic-server-*` examples
- Add section headers for better code organization in feature examples
- Update READMEs with Build System section explaining single-file
  bundling

These changes make examples more consistent and easier to adapt.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

examples/basic-server-preact/src/mcp-app.tsx

@@ -1,23 +1,18 @@
 /**
  * @file App that demonstrates a few features using MCP Apps SDK + Preact.
  */
-import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
+import {
+  App,
+  applyDocumentTheme,
+  applyHostFonts,
+  applyHostStyleVariables,
+  type McpUiHostContext,
+} from "@modelcontextprotocol/ext-apps";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import { useCallback, useEffect, useState } from "preact/hooks";
 import { render } from "preact";
 import styles from "./mcp-app.module.css";
 
-
-const IMPLEMENTATION = { name: "Get Time App", version: "1.0.0" };
-
-
-const log = {
-  info: console.log.bind(console, "[APP]"),
-  warn: console.warn.bind(console, "[APP]"),
-  error: console.error.bind(console, "[APP]"),
-};
-
-
 function extractTime(callToolResult: CallToolResult): string {
   const { text } = callToolResult.content?.find((c) => c.type === "text")!;
   return text;
@@ -30,19 +25,36 @@ function GetTimeApp() {
   const [toolResult, setToolResult] = useState<CallToolResult | null>(null);
   const [hostContext, setHostContext] = useState<McpUiHostContext | undefined>();
 
+  // Apply host styles reactively when hostContext changes
   useEffect(() => {
-    const instance = new App(IMPLEMENTATION);
+    if (hostContext?.theme) {
+      applyDocumentTheme(hostContext.theme);
+    }
+    if (hostContext?.styles?.variables) {
+      applyHostStyleVariables(hostContext.styles.variables);
+    }
+    if (hostContext?.styles?.css?.fonts) {
+      applyHostFonts(hostContext.styles.css.fonts);
+    }
+  }, [hostContext]);
+
+  useEffect(() => {
+    const instance = new App({ name: "Get Time App", version: "1.0.0" });
 
     instance.ontoolinput = async (input) => {
-      log.info("Received tool call input:", input);
+      console.info("Received tool call input:", input);
     };
 
     instance.ontoolresult = async (result) => {
-      log.info("Received tool call result:", result);
+      console.info("Received tool call result:", result);
       setToolResult(result);
     };
 
-    instance.onerror = log.error;
+    instance.ontoolcancelled = (params) => {
+      console.info("Tool call cancelled:", params.reason);
+    };
+
+    instance.onerror = console.error;
 
     instance.onhostcontextchanged = (params) => {
       setHostContext((prev) => ({ ...prev, ...params }));
@@ -83,12 +95,12 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
 
   const handleGetTime = useCallback(async () => {
     try {
-      log.info("Calling get-time tool...");
+      console.info("Calling get-time tool...");
       const result = await app.callServerTool({ name: "get-time", arguments: {} });
-      log.info("get-time result:", result);
+      console.info("get-time result:", result);
       setServerTime(extractTime(result));
     } catch (e) {
-      log.error(e);
+      console.error(e);
       setServerTime("[ERROR]");
     }
   }, [app]);
@@ -96,26 +108,26 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
   const handleSendMessage = useCallback(async () => {
     const signal = AbortSignal.timeout(5000);
     try {
-      log.info("Sending message text to Host:", messageText);
+      console.info("Sending message text to Host:", messageText);
       const { isError } = await app.sendMessage(
         { role: "user", content: [{ type: "text", text: messageText }] },
         { signal },
       );
-      log.info("Message", isError ? "rejected" : "accepted");
+      console.info("Message", isError ? "rejected" : "accepted");
     } catch (e) {
-      log.error("Message send error:", signal.aborted ? "timed out" : e);
+      console.error("Message send error:", signal.aborted ? "timed out" : e);
     }
   }, [app, messageText]);
 
   const handleSendLog = useCallback(async () => {
-    log.info("Sending log text to Host:", logText);
+    console.info("Sending log text to Host:", logText);
     await app.sendLog({ level: "info", data: logText });
   }, [app, logText]);
 
   const handleOpenLink = useCallback(async () => {
-    log.info("Sending open link request to Host:", linkUrl);
+    console.info("Sending open link request to Host:", linkUrl);
     const { isError } = await app.openLink({ url: linkUrl });
-    log.info("Open link request", isError ? "rejected" : "accepted");
+    console.info("Open link request", isError ? "rejected" : "accepted");
   }, [app, linkUrl]);
 
   return (