Update naming of functions to reflect styles.variables nesting

Author: martinalong

examples/customer-segmentation-server/src/mcp-app.ts

@@ -4,7 +4,7 @@
 import {
   App,
   PostMessageTransport,
-  applyHostStyles,
+  applyHostStyleVariables,
   applyDocumentTheme,
 } from "@modelcontextprotocol/ext-apps";
 import { Chart, registerables } from "chart.js";
@@ -454,7 +454,7 @@ app.onhostcontextchanged = (params) => {
     applyDocumentTheme(params.theme);
   }
   if (params.styles?.variables) {
-    applyHostStyles(params.styles.variables);
+    applyHostStyleVariables(params.styles.variables);
   }
   // Recreate chart to pick up new colors
   if (state.chart && (params.theme || params.styles?.variables)) {
@@ -470,7 +470,7 @@ app.connect(new PostMessageTransport(window.parent)).then(() => {
     applyDocumentTheme(ctx.theme);
   }
   if (ctx?.styles?.variables) {
-    applyHostStyles(ctx.styles.variables);
+    applyHostStyleVariables(ctx.styles.variables);
   }
 });
 

specification/draft/apps.mdx

@@ -587,7 +587,7 @@ type McpUiStyleVariableKey =
   ...
 }
 ```
-- Apps can use the `applyHostStyles` utility (or `useHostStyles` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet
+- Apps can use the `applyHostStyleVariables` utility (or `useHostStyleVariables` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet
 - Apps can use the `applyDocumentTheme` utility (or `useDocumentTheme` if they prefer a React hook) to easily respond to Host Context `theme` changes in a way that is compatible with the host's light/dark color variables 
 
 Example usage of standardized CSS variables:

src/app.ts

@@ -48,7 +48,7 @@ import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 export { PostMessageTransport } from "./message-transport";
 export * from "./types";
 export {
-  applyHostStyles,
+  applyHostStyleVariables,
   getDocumentTheme,
   applyDocumentTheme,
 } from "./styles";

src/react/index.tsx

@@ -9,7 +9,7 @@
  * ## Main Exports
  *
  * - {@link useApp} - React hook to create and connect an MCP App
- * - {@link useHostStyles} - React hook to apply host styles as CSS variables
+ * - {@link useHostStyleVariables} - React hook to apply host style variables and theme
  * - {@link useDocumentTheme} - React hook for reactive document theme
  * - {@link useAutoResize} - React hook for manual auto-resize control (rarely needed)
  *

src/react/useHostStyles.ts

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
 import { App } from "../app";
-import { applyDocumentTheme, applyHostStyles } from "../styles";
+import { applyDocumentTheme, applyHostStyleVariables } from "../styles";
 import { McpUiHostContext } from "../types";
 
 /**
- * React hook that applies host styles and theme as CSS custom properties.
+ * React hook that applies host style variables and theme as CSS custom properties.
  *
  * This hook listens to host context changes and automatically applies:
  * - `styles.variables` CSS variables to `document.documentElement` (e.g., `--color-background-primary`)
@@ -24,16 +24,16 @@ import { McpUiHostContext } from "../types";
  * @example Basic usage with useApp
  * ```tsx
  * import { useApp } from '@modelcontextprotocol/ext-apps/react';
- * import { useHostStyles } from '@modelcontextprotocol/ext-apps/react';
+ * import { useHostStyleVariables } from '@modelcontextprotocol/ext-apps/react';
  *
  * function MyApp() {
  *   const { app, isConnected } = useApp({
  *     appInfo: { name: "MyApp", version: "1.0.0" },
  *     capabilities: {},
  *   });
  *
- *   // Automatically apply host styles and theme
- *   useHostStyles(app);
+ *   // Automatically apply host style variables and theme
+ *   useHostStyleVariables(app);
  *
  *   return (
  *     <div style={{ background: 'var(--color-background-primary)' }}>
@@ -49,14 +49,14 @@ import { McpUiHostContext } from "../types";
  *
  * // ... get initial context from app.connect() result
  *
- * useHostStyles(app, hostContext);
+ * useHostStyleVariables(app, hostContext);
  * ```
  *
- * @see {@link applyHostStyles} for the underlying styles function
+ * @see {@link applyHostStyleVariables} for the underlying styles function
  * @see {@link applyDocumentTheme} for the underlying theme function
  * @see {@link McpUiStyles} for available CSS variables
  */
-export function useHostStyles(
+export function useHostStyleVariables(
   app: App | null,
   initialContext?: McpUiHostContext | null,
 ): void {
@@ -71,7 +71,7 @@ export function useHostStyles(
       applyDocumentTheme(initialContext.theme);
     }
     if (initialContext?.styles?.variables) {
-      applyHostStyles(initialContext.styles.variables);
+      applyHostStyleVariables(initialContext.styles.variables);
     }
     if (initialContext?.theme || initialContext?.styles?.variables) {
       initialApplied.current = true;
@@ -89,7 +89,7 @@ export function useHostStyles(
         applyDocumentTheme(params.theme);
       }
       if (params.styles?.variables) {
-        applyHostStyles(params.styles.variables);
+        applyHostStyleVariables(params.styles.variables);
       }
     };
   }, [app]);

src/styles.ts

@@ -74,7 +74,7 @@ export function applyDocumentTheme(theme: McpUiTheme): void {
 }
 
 /**
- * Apply host styles as CSS custom properties on an element.
+ * Apply host style variables as CSS custom properties on an element.
  *
  * This function takes the `variables` object from `McpUiHostContext.styles` and sets
  * each CSS variable on the specified root element (defaults to `document.documentElement`).
@@ -84,27 +84,27 @@ export function applyDocumentTheme(theme: McpUiTheme): void {
  * @param styles - The styles object from `McpUiHostContext.styles.variables`
  * @param root - The element to apply styles to (defaults to `document.documentElement`)
  *
- * @example Apply styles from host context
+ * @example Apply style variables from host context
  * ```typescript
- * import { applyHostStyles } from '@modelcontextprotocol/ext-apps';
+ * import { applyHostStyleVariables } from '@modelcontextprotocol/ext-apps';
  *
  * app.onhostcontextchanged = (params) => {
  *   if (params.styles?.variables) {
- *     applyHostStyles(params.styles.variables);
+ *     applyHostStyleVariables(params.styles.variables);
  *   }
  * };
  * ```
  *
  * @example Apply to a specific element
  * ```typescript
  * const container = document.getElementById('app-root');
- * applyHostStyles(hostContext.styles?.variables, container);
+ * applyHostStyleVariables(hostContext.styles?.variables, container);
  * ```
  *
  * @see {@link McpUiStyles} for the available CSS variables
  * @see {@link McpUiHostContext} for the full host context structure
  */
-export function applyHostStyles(
+export function applyHostStyleVariables(
   styles: McpUiStyles,
   root: HTMLElement = document.documentElement,
 ): void {