feat: update button component to use Slot.Root and add new size variants; refactor textarea styles for improved accessibility; implement remote app connection logic in new page

src/app/remote/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { LayoutMain } from "@/modules/layout";
+import { RemoteApp } from "@kevisual/remote-app";
+import { useEffect } from "react";
+import { QueryRouterServer } from "@kevisual/router/browser";
+export default function Home() {
+  useEffect(() => {
+    init();
+  }, []);
+  const init = async () => {
+    // const url = new URL('https://kevisual.cn/ws/proxy');
+    const isKevisualEnv = window.location.hostname.endsWith('kevisual.cn');
+    const kevisualWs = 'https://kevisual.cn/ws/proxy';
+    const url = new URL(isKevisualEnv ? kevisualWs : 'https://kevisual.xiongxiao.me/ws/proxy');
+    const token = localStorage.getItem('token') || '';
+    const id = 'remote';
+    const app = new QueryRouterServer();
+    app.route({
+      path: 'web-test',
+      key: 'web-test',
+      description: 'Web Router Studio',
+    }).define(async (ctx) => {
+      console.log('Received request at /web-test', ctx.query, ctx.state, ctx);
+      ctx.body = 'Hello from remote route!';
+    }).addTo(app);
+    app.createRouteList()
+    const remoteApp = new RemoteApp({
+      url: url.toString(),
+      token,
+      id,
+      app: app as any,
+    });
+    const connect = await remoteApp.isConnect();
+    if (connect) {
+      console.log('Connected to proxy server');
+      remoteApp.listenProxy();
+      remoteApp.emitter.on('message', (event) => {
+        const _msg = event.toString();
+        console.log('Received message from remote app:', _msg);
+      });
+    } else {
+      console.log('Not connected to proxy server');
+    }
+  }
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <LayoutMain>
+
+      </LayoutMain>
+    </div>
+  );
+}