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-svelte/src/App.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
 import { onMount } from "svelte";
-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";
 
-const log = {
-  info: console.log.bind(console, "[APP]"),
-  warn: console.warn.bind(console, "[APP]"),
-  error: console.error.bind(console, "[APP]"),
-};
-
 function extractTime(result: CallToolResult): string {
   const { text } = result.content?.find((c) => c.type === "text")!;
   return text;
 }
 
+
 let app = $state<App | null>(null);
 let hostContext = $state<McpUiHostContext | undefined>();
 let serverTime = $state("Loading...");
@@ -21,19 +22,36 @@ let messageText = $state("This is message text.");
 let logText = $state("This is log text.");
 let linkUrl = $state("https://modelcontextprotocol.io/");
 
+// Apply host styles reactively when hostContext changes
+$effect(() => {
+  if (hostContext?.theme) {
+    applyDocumentTheme(hostContext.theme);
+  }
+  if (hostContext?.styles?.variables) {
+    applyHostStyleVariables(hostContext.styles.variables);
+  }
+  if (hostContext?.styles?.css?.fonts) {
+    applyHostFonts(hostContext.styles.css.fonts);
+  }
+});
+
 onMount(async () => {
   const instance = new App({ name: "Get Time App", version: "1.0.0" });
 
   instance.ontoolinput = (params) => {
-    log.info("Received tool call input:", params);
+    console.info("Received tool call input:", params);
   };
 
   instance.ontoolresult = (result) => {
-    log.info("Received tool call result:", result);
+    console.info("Received tool call result:", result);
     serverTime = extractTime(result);
   };
 
-  instance.onerror = log.error;
+  instance.ontoolcancelled = (params) => {
+    console.info("Tool call cancelled:", params.reason);
+  };
+
+  instance.onerror = console.error;
 
   instance.onhostcontextchanged = (params) => {
     hostContext = { ...hostContext, ...params };
@@ -47,12 +65,12 @@ onMount(async () => {
 async function handleGetTime() {
   if (!app) return;
   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);
     serverTime = extractTime(result);
   } catch (e) {
-    log.error(e);
+    console.error(e);
     serverTime = "[ERROR]";
   }
 }
@@ -61,28 +79,28 @@ async function handleSendMessage() {
   if (!app) return;
   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);
   }
 }
 
 async function handleSendLog() {
   if (!app) return;
-  log.info("Sending log text to Host:", logText);
+  console.info("Sending log text to Host:", logText);
   await app.sendLog({ level: "info", data: logText });
 }
 
 async function handleOpenLink() {
   if (!app) return;
-  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");
 }
 </script>