feat: add remote app functionality and environment configuration

- Introduced a new HTML file for the light code demo.
- Added TypeScript definitions for environment variables.
- Implemented remote app logic for both browser and node environments.
- Configured Vite to load environment variables and define KEVISUAL_TOKEN.
- Updated README with relevant information about the project structure and usage.

src/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const KEVISUAL_TOKEN: string;

src/remote/browser.ts

@@ -0,0 +1,46 @@
+import { RemoteApp } from "@kevisual/remote-app"
+import { QueryRouterServer } from "@kevisual/router/browser"
+
+const app = new QueryRouterServer();
+app.route({
+  path: 'web-browser-test',
+  key: 'web-browser-test',
+  description: 'Web Router Studio',
+}).define(async (ctx) => {
+  console.log('Received request at /web-browser-test', ctx.query, ctx.state, ctx);
+  ctx.body = 'Hello from remote route! web-browser-test';
+}).addTo(app);
+app.createRouteList()
+// @ts-ignore
+const token = KEVISUAL_TOKEN;
+// const token = 'st_g1fdlzmftb0dj44k3c0vusnqrfc5kk69';
+console.log('Registered routes:', token, import.meta.env.KEVISUAL_TOKEN);
+
+const remoteApp = new RemoteApp({
+  url: 'https://kevisual.xiongxiao.me/ws/proxy',
+  id: 'test-remote-app-browser',
+  // 从环境变量中读取 KEVISUAL_TOKEN
+  token: token || '',
+  app: app as any,
+})
+
+const main = async () => {
+  remoteApp.isConnect();
+  // if (connect) {
+  //   remoteApp.listenProxy();
+  // }
+  remoteApp.on('message', (event) => {
+    const _msg = event.toString();
+    console.log('Received message from remote app:', _msg);
+    document.body.innerText += `\n${_msg}`;
+  });
+  remoteApp.on('open', () => {
+    remoteApp.listenProxy();
+    console.log('Connection to remote app opened (Browser)');
+  });
+  remoteApp.on('close', () => {
+    console.log('Connection to remote app closed (Browser)');
+  });
+}
+
+main();

src/remote/node.ts

@@ -0,0 +1,39 @@
+import { RemoteApp } from "@kevisual/remote-app";
+
+import { QueryRouterServer } from "@kevisual/router/browser"
+
+const app = new QueryRouterServer();
+app.route({
+  path: 'web-node-test',
+  key: 'web-node-test',
+  description: 'Web Router Studio',
+}).define(async (ctx) => {
+  console.log('Received request at /web-node-test', ctx.query, ctx.state, ctx);
+  ctx.body = 'Hello from remote route! web-node-test';
+}).addTo(app);
+app.createRouteList()
+
+export const remoteApp = new RemoteApp({
+  url: 'https://kevisual.xiongxiao.me/ws/proxy',
+  id: 'test-remote-app-node',
+  // 从环境变量中读取 KEVISUAL_TOKEN
+  token: process.env.KEVISUAL_TOKEN || '',
+  app: app as any,
+});
+
+export const main = async () => {
+  remoteApp.isConnect();
+  remoteApp.on('message', (event) => {
+    const _msg = event.toString();
+    console.log('Received message from remote app (Node):', _msg);
+  });
+  remoteApp.on('open', () => {
+    remoteApp.listenProxy();
+    console.log('Connection to remote app opened (Node)');
+  });
+  remoteApp.on('close', () => {
+    console.log('Connection to remote app closed (Node)');
+  });
+};
+
+main();