update

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "packages/components"]
-	path = packages/components
-	# url = git@git.xiongxiao.me:kevisual/components.git
-  url = https://git.xiongxiao.me/kevisual/components.git

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package.json

@@ -7,13 +7,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "build:css": "tailwindcss -i ./src/index.css -o ./dist/render.css --minify",
-    "postbuild2": "pnpm build:css",
     "preview": "vite preview",
-    "pub": "envision deploy ./dist -k vite-react -v 0.0.1",
+    "ui": "pnpm dlx shadcn@latest add ",
-    "dev:lib": "turbo dev",
+    "pub": "envision deploy ./dist -k vite-react -v 0.0.1"
-    "git:submodule": "git submodule update --init --recursive",
-    "cmd": "tsx ./script/index.ts "
   },
   "files": [
     "dist"
@@ -21,42 +17,37 @@
   "author": "abearxiong <xiongxiao@xiongxiao.me>",
   "license": "MIT",
   "dependencies": {
-    "@emotion/react": "^11.14.0",
+    "@kevisual/router": "0.0.70",
-    "@emotion/styled": "^11.14.0",
+    "@radix-ui/react-slot": "^1.2.4",
-    "@kevisual/router": "0.0.22",
+    "@tanstack/react-router": "^1.158.0",
-    "@mui/material": "^7.1.1",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.19",
-    "lodash-es": "^4.17.21",
+    "es-toolkit": "^1.44.0",
-    "lucide-react": "^0.513.0",
+    "lucide-react": "^0.563.0",
-    "nanoid": "^5.1.5",
+    "nanoid": "^5.1.6",
-    "react": "^19.1.0",
+    "react": "^19.2.4",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.2.4",
-    "react-hook-form": "^7.57.0",
+    "react-hook-form": "^7.71.1",
-    "react-router": "^7.6.2",
+    "zustand": "^5.0.11"
-    "react-router-dom": "^7.6.2",
-    "react-toastify": "^11.0.5",
-    "zustand": "^5.0.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@kevisual/components": "workspace:*",
+    "@kevisual/query": "0.0.39",
-    "@kevisual/query": "0.0.28",
+    "@kevisual/types": "^0.0.12",
-    "@kevisual/ssl": "^0.0.1",
+    "@tailwindcss/vite": "^4.1.18",
-    "@kevisual/types": "^0.0.10",
+    "@tanstack/react-router-devtools": "^1.158.0",
-    "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/router-plugin": "^1.158.0",
-    "@types/node": "^22.15.30",
+    "@types/node": "^25.2.0",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react": "^5.1.3",
-    "commander": "^14.0.0",
+    "dotenv": "^17.2.3",
-    "dotenv": "^16.5.0",
+    "tailwind-merge": "^3.4.0",
-    "inquire": "^0.4.8",
+    "tailwindcss": "^4.1.18",
-    "tailwindcss": "^4.1.8",
+    "typescript": "^5.9.3",
-    "typescript": "^5.8.3",
+    "vite": "^7.3.1"
-    "vite": "^6.3.5"
   },
-  "packageManager": "pnpm@10.11.1"
+  "packageManager": "pnpm@10.28.2"
 }

pnpm-workspace.yaml

@@ -1,5 +0,0 @@
-packages:
-  - submodules/*
-  - packages/*
-onlyBuiltDependencies:
-  - '@tailwindcss/oxide'

src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/index.css

@@ -1 +1,125 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/main.tsx

@@ -1,12 +1,25 @@
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom/client'
-import { App, AppRoute } from './pages/App.tsx';
+import { RouterProvider, createRouter } from '@tanstack/react-router'
-// import { CustomThemeProvider } from '@kevisual/components/theme/index.tsx';
+import { routeTree } from './routeTree.gen'
+import './index.css'
 
-console.log('cu');
+// Set up a Router instance
-// createRoot(document.getElementById('root')!).render(
+const router = createRouter({
-//   <CustomThemeProvider>
+  routeTree,
-//     <AppRoute />
+  defaultPreload: 'intent',
-//   </CustomThemeProvider>,
+  scrollRestoration: true,
-// );
+})
 
-createRoot(document.getElementById('root')!).render(<App />);
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('root')!
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<RouterProvider router={router} />)
+}

src/modules/basename.ts

@@ -1 +1,2 @@
+// @ts-ignore
 export const basename = DEV_SERVER ? '/' : BASE_NAME;

src/routeTree.gen.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

src/routes/__root.tsx

@@ -0,0 +1,27 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <>
+      <div className="p-2 flex gap-2 text-lg">
+        <Link
+          to="/"
+          activeProps={{
+            className: 'font-bold',
+          }}
+          activeOptions={{ exact: true }}
+        >
+          Home
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  )
+}

src/routes/index.ts

@@ -1 +0,0 @@
-// import {}

src/routes/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>test</div>
+}

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "@kevisual/types/json/frontend.json",
   "compilerOptions": {
     "baseUrl": "./",
+    "jsx": "react-jsx",
     "paths": {
       "@/*": [
         "src/*"

turbo.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://turbo.build/schema.json",
-  "tasks": {
-    "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "outputs": [
-        "dist/**"
-      ]
-    },
-    "dev:lib": {
-      "persistent": true,
-      "cache": true
-    },
-    "build:lib": {
-      "dependsOn": [
-        "^build:lib"
-      ]
-    }
-  }
-}

vite.config.mjs

@@ -1,63 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import pkgs from './package.json';
-import tailwindcss from '@tailwindcss/vite';
-import basicSsl from '@kevisual/ssl';
-import dotenv from 'dotenv';
-dotenv.config({ path: '.env.development' });
-const version = pkgs.version || '0.0.1';
-const isDev = process.env.NODE_ENV === 'development';
-const basename = isDev ? '/' : pkgs?.basename || '/';
-const plugins = [react(), tailwindcss()];
-const isCNB = process.env.CNB === 'true';
-if (isDev && !isCNB) {
-  plugins.push(basicSsl());
-}
-let target = process.env.VITE_API_URL || 'http://localhost:51015';
-const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
-let proxy = {
-  '/root/center/': {
-    target: `${target}/root/center/`,
-  },
-  '/user/login/': {
-    target: `${target}/user/login/`,
-  },
-  '/api': apiProxy,
-  '/client': apiProxy,
-};
-/**
- * @see https://vitejs.dev/config/
- */
-export default defineConfig(() => {
-  return {
-    plugins,
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, './src'),
-      },
-    },
-    base: basename,
-    envPrefix: 'KEVISUAL_',
-    define: {
-      DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
-      APP_VERSION: JSON.stringify(version),
-      BASE_NAME: JSON.stringify(basename),
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-    },
-    build: {
-      target: 'modules',
-      // lib: {
-      //   entry: './src/libs.ts',
-      //   formats: ['es'],
-      //   fileName: (format) => `render.js`,
-      // },
-    },
-    server: {
-      port: 7008,
-      host: '0.0.0.0',
-      allowedHosts: true,
-      proxy,
-    },
-  };
-});

vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import pkgs from './package.json';
+import tailwindcss from '@tailwindcss/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+const isDev = process.env.NODE_ENV === 'development';
+const basename = isDev ? '/' : pkgs?.basename || '/';
+
+let target = process.env.VITE_API_URL || 'http://localhost:51515';
+const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
+let proxy = {
+  '/root/': apiProxy,
+  '/api': apiProxy,
+  '/client': apiProxy,
+};
+/**
+ * @see https://vitejs.dev/config/
+ */
+export default defineConfig({
+  plugins: [
+    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    react(),
+    tailwindcss()
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  base: basename,
+  define: {
+    BASE_NAME: JSON.stringify(basename),
+  },
+  server: {
+    port: 7008,
+    host: '0.0.0.0',
+    allowedHosts: true,
+    proxy,
+  },
+});