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>
+  );
+}

src/components/ui/button.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
@@ -22,9 +22,11 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
       },
@@ -46,7 +48,7 @@ function Button({
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp

src/components/ui/textarea.tsx

@@ -7,8 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:outline-hidden",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}