modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Regenerate schemas after npm install

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
martinalong 2025-12-10 23:50:38 -08:00
commit f276ec6df9
No known key found for this signature in database
1 changed files with 883 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/react/useHostStyles.ts
View file

@ -1,22 +1,25 @@
import { useEffect, useRef } from "react";
import { App } from "../app";
import { applyHostStyles } from "../styles";
import { applyDocumentTheme, applyHostStyles } from "../styles";
import { McpUiHostContext } from "../types";
/**
* React hook that applies host styles as CSS custom properties.
* React hook that applies host styles and theme as CSS custom properties.
*
* This hook listens to host context changes and automatically applies the
* `styles` CSS variables to `document.documentElement`. This allows your
* app to use the host's theming values via CSS variables like
* `var(--color-background-primary)`.
* This hook listens to host context changes and automatically applies:
* - `styles` CSS variables to `document.documentElement` (e.g., `--color-background-primary`)
* - `theme` via `color-scheme` CSS property, enabling `light-dark()` CSS function support
*
* The hook also applies styles from the initial host context when the app
* first connects.
* The hook also applies styles and theme from the initial host context when
* the app first connects.
*
* **Note:** If the host provides style values using CSS `light-dark()` function,
* this hook ensures they work correctly by setting the `color-scheme` property
* based on the host's theme preference.
*
* @param app - The connected App instance, or null during initialization
* @param initialContext - Initial host context from the connection (optional).
* If provided, styles will be applied immediately on mount.
* If provided, styles and theme will be applied immediately on mount.
*
* @example Basic usage with useApp
* ```tsx
@ -29,7 +32,7 @@ import { McpUiHostContext } from "../types";
* capabilities: {},
* });
*
* // Automatically apply host styles as CSS variables
* // Automatically apply host styles and theme
* useHostStyles(app);
*
* return (
@ -49,33 +52,42 @@ import { McpUiHostContext } from "../types";
* useHostStyles(app, hostContext);
* ```
*
* @see {@link applyHostStyles} for the underlying function
* @see {@link applyHostStyles} for the underlying styles function
* @see {@link applyDocumentTheme} for the underlying theme function
* @see {@link McpUiStyles} for available CSS variables
*/
export function useHostStyles(
app: App | null,
initialContext?: McpUiHostContext | null,
): void {
const initialStylesApplied = useRef(false);
const initialApplied = useRef(false);
// Apply initial styles once on mount
// Apply initial styles and theme once on mount
useEffect(() => {
if (initialStylesApplied.current) {
if (initialApplied.current) {
return;
}
if (initialContext?.theme) {
applyDocumentTheme(initialContext.theme);
}
if (initialContext?.styles) {
applyHostStyles(initialContext.styles);
initialStylesApplied.current = true;
}
if (initialContext?.theme || initialContext?.styles) {
initialApplied.current = true;
}
}, [initialContext]);
// Listen for host context changes and apply updated styles
// Listen for host context changes and apply updated styles/theme
useEffect(() => {
if (!app) {
return;
}
app.onhostcontextchanged = (params) => {
if (params.theme) {
applyDocumentTheme(params.theme);
}
if (params.styles) {
applyHostStyles(params.styles);
}