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

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./dist/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -10,7 +10,7 @@ const nextConfig: NextConfig = {
   distDir: 'dist',
   basePath: basePath,
   trailingSlash: true,
-  transpilePackages: ['@kevisual/api', "@kevisual/use-config"],
+  transpilePackages: ['@kevisual/api', "@kevisual/use-config", "@kevisual/remote-app", "@kevisual/router"],
   images: {
     unoptimized: true,
   },

package.json

@@ -12,10 +12,10 @@
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
     "@base-ui/react": "^1.1.0",
-    "@kevisual/api": "^0.0.41",
+    "@kevisual/api": "^0.0.44",
     "@kevisual/cache": "^0.0.5",
     "@kevisual/query": "^0.0.39",
-    "@kevisual/router": "^0.0.66",
+    "@kevisual/router": "^0.0.70",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -28,7 +28,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
-    "antd": "^6.2.2",
+    "antd": "^6.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -41,6 +41,7 @@
     "lucide-react": "^0.563.0",
     "marked": "^17.0.1",
     "next": "16.1.6",
+    "radix-ui": "^1.4.3",
     "react": "19.2.4",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.4",
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "@kevisual/context": "^0.0.4",
+    "@kevisual/remote-app": "^0.0.2",
     "@kevisual/types": "^0.0.12",
     "@kevisual/use-config": "^1.0.30",
     "@tailwindcss/postcss": "^4",

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}