init

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+
+.astro
+
+dist
+
+.env
+!.env*example

astro.config.mjs

@@ -0,0 +1,44 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+import sitemap from '@astrojs/sitemap';
+import pkgs from './package.json';
+import tailwindcss from '@tailwindcss/vite';
+import dotenv from 'dotenv';
+const isDev = process.env.NODE_ENV === 'development';
+const plugins = [tailwindcss()];
+dotenv.config();
+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,
+  '/user/login/': apiProxy,
+  '/api': apiProxy,
+  '/client': apiProxy,
+};
+
+const basename = isDev ? '' : pkgs.basename;
+export default defineConfig({
+  // ...
+  // site: 'https://kevisual.xiongxiao.me/root/astro',
+  // base: isDev ? undefined : pkgs.basename,
+  base: isDev ? undefined : pkgs.basename,
+  integrations: [
+    mdx(),
+    react(), //
+    // sitemap(), // sitemap must be site has a domain
+  ],
+
+  vite: {
+    plugins,
+    define: {
+      BASE_NAME: JSON.stringify(basename),
+    },
+    server: {
+      port: 7008,
+      host: '0.0.0.0',
+      allowedHosts: true,
+      proxy,
+    },
+  },
+});

components.json

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

package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@kevisual/ai-pages",
+  "version": "0.0.3",
+  "description": "",
+  "main": "index.js",
+  "basename": "/root/ai-pages",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "pub": "ev deploy ./dist -k ai-pages -v 0.0.3 -u",
+    "git:submodule": "git submodule update --init --recursive",
+    "sn": "pnpm dlx shadcn@latest add "
+  },
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@astrojs/mdx": "^4.3.13",
+    "@astrojs/react": "^4.4.2",
+    "@astrojs/sitemap": "^3.7.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@kevisual/cache": "^0.0.5",
+    "@kevisual/codemirror": "^0.0.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.1.18",
+    "@uiw/react-codemirror": "^4.25.4",
+    "astro": "^5.17.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "dayjs": "^1.11.19",
+    "es-toolkit": "^1.44.0",
+    "fuse.js": "^7.1.0",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.563.0",
+    "nanoid": "^5.1.6",
+    "pretty-bytes": "^7.1.0",
+    "re-resizable": "^6.11.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-draggable": "^4.5.0",
+    "react-dropzone": "^14.4.0",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.5.5",
+    "react-sortablejs": "^6.1.4",
+    "sonner": "^2.0.7",
+    "sortablejs": "^1.15.6",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@kevisual/api": "^0.0.34",
+    "@kevisual/query": "^0.0.38",
+    "@kevisual/router": "^0.0.63",
+    "@kevisual/store": "^0.0.9",
+    "@kevisual/types": "^0.0.12",
+    "@types/crypto-js": "^4.2.2",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/sortablejs": "^1.15.9",
+    "@vitejs/plugin-react": "^5.1.2",
+    "commander": "^14.0.2",
+    "crypto-js": "^4.2.0",
+    "dotenv": "^17.2.3",
+    "idb-keyval": "^6.2.2",
+    "path-browserify-esm": "^1.0.6",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "vite": "^7.3.1",
+    "vite-plugin-remote-assets": "^2.1.0"
+  },
+  "packageManager": "pnpm@10.28.2"
+}

readme.md

@@ -0,0 +1 @@
+合并一些功能模块，ai相关的，导航，文字转语音，语音转文字，对话等

src/apps/ai-editor/content.tsx

@@ -0,0 +1,104 @@
+import { useShallow } from 'zustand/shallow';
+import { getCurrentContent, getFileUrl, useMenuStore } from './store/menu';
+import { useEffect, useState } from 'react';
+import { checkText } from './modules/get-content-type';
+import { TextEditor } from './editor/text/TextEditor';
+import { useEditStore } from './store/edit';
+import { FileText, FileType } from 'lucide-react';
+import { ImagePreview } from './preview/ImagePreview';
+import { PdfPreview } from './preview/PdfPreview';
+
+export const Content: React.FC = () => {
+  const { currentPath } = useMenuStore(
+    useShallow((state) => ({
+      currentPath: state.currentPath,
+    })),
+  );
+  const [content, setContent] = useState<string | null>(null);
+  const [fileUrl, setFileUrl] = useState<string | null>(null);
+  const { type, setType } = useEditStore(
+    useShallow((state) => ({
+      type: state.type,
+      setType: state.setType,
+    })),
+  );
+
+  useEffect(() => {
+    const fetchContent = async () => {
+      if (!currentPath) return;
+
+      const checkResult = checkText(currentPath);
+
+      if (checkResult.type === 'unsupported') {
+        setContent('This file type is not supported for viewing.');
+        setFileUrl(null);
+        setType('');
+        return;
+      }
+
+      if (checkResult.type === 'image' || checkResult.type === 'pdf') {
+        setContent(null);
+        const url = await getFileUrl(currentPath);
+        setFileUrl(url);
+        setType(checkResult.type);
+        return;
+      }
+
+      // text
+      setFileUrl(null);
+      setContent('Loading content...');
+      const textContent = await getCurrentContent(currentPath);
+      setContent(textContent || '');
+      setType('text');
+    };
+
+    fetchContent();
+  }, [currentPath]);
+
+  // 清理 URL
+  useEffect(() => {
+    return () => {
+      if (fileUrl) {
+        URL.revokeObjectURL(fileUrl);
+      }
+    };
+  }, [fileUrl]);
+
+  // 空状态
+  if (!currentPath) {
+    return (
+      <div className='h-full w-full flex items-center justify-center bg-white dark:bg-black'>
+        <div className='text-center text-gray-400'>
+          <FileText className='w-12 h-12 mx-auto mb-3 opacity-50' />
+          <p className='text-sm'>从侧边栏选择一个文件进行编辑</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='h-full w-full overflow-hidden bg-white dark:bg-black'>
+      <div className='flex flex-col w-full h-full relative'>
+        {type === 'text' && content && (
+          <div className='w-full h-full'>
+            <TextEditor filepath={currentPath!} content={content} />
+          </div>
+        )}
+        {type === 'image' && fileUrl && (
+          <ImagePreview src={fileUrl} alt={currentPath.split('/').pop()} />
+        )}
+        {type === 'pdf' && fileUrl && (
+          <PdfPreview src={fileUrl} fileName={currentPath.split('/').pop()} />
+        )}
+        {type === '' && content && (
+          <div className='h-full w-full flex items-center justify-center'>
+            <div className='text-center text-gray-500'>
+              <FileType className='w-12 h-12 mx-auto mb-3 opacity-50' />
+              <p className='text-sm'>{content}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/apps/ai-editor/editor/text/TextEditor.tsx

@@ -0,0 +1,80 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { html } from '@codemirror/lang-html';
+import { markdown } from '@codemirror/lang-markdown';
+import { json } from '@codemirror/lang-json';
+import { css } from '@codemirror/lang-css';
+import { useMemo } from 'react';
+
+type TextEditorProps = {
+  filepath: string;
+  content: string;
+  onChange?: (value: string) => void;
+};
+
+const getExtension = (filepath: string) => {
+  const ext = filepath.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'html':
+    case 'htm':
+      return [html()];
+    case 'md':
+    case 'markdown':
+      return [markdown()];
+    case 'js':
+    case 'jsx':
+    case 'ts':
+    case 'tsx':
+      return [javascript({ jsx: true, typescript: true })];
+    case 'json':
+      return [json()];
+    case 'css':
+    case 'scss':
+    case 'less':
+      return [css()];
+    default:
+      return [javascript()];
+  }
+};
+
+export const TextEditor = ({ filepath, content, onChange }: TextEditorProps) => {
+  const extensions = useMemo(() => getExtension(filepath), [filepath]);
+
+  return (
+    <div className='h-full overflow-y-auto overflow-x-hidden'>
+      <CodeMirror
+        value={content}
+        extensions={extensions}
+        onChange={onChange}
+        className='h-full text-sm'
+        height='100%'
+        basicSetup={{
+          lineNumbers: true,
+          highlightActiveLineGutter: true,
+          highlightSpecialChars: true,
+          history: true,
+          foldGutter: true,
+          drawSelection: true,
+          dropCursor: true,
+          allowMultipleSelections: true,
+          indentOnInput: true,
+          syntaxHighlighting: true,
+          bracketMatching: true,
+          closeBrackets: true,
+          autocompletion: true,
+          rectangularSelection: true,
+          crosshairCursor: true,
+          highlightActiveLine: true,
+          highlightSelectionMatches: true,
+          closeBracketsKeymap: true,
+          defaultKeymap: true,
+          searchKeymap: true,
+          historyKeymap: true,
+          foldKeymap: true,
+          completionKeymap: true,
+          lintKeymap: true,
+        }}
+      />
+    </div>
+  );
+};

src/apps/ai-editor/index.tsx

@@ -0,0 +1,50 @@
+import Sidebar from './sidebar';
+import { Content } from './content';
+import { Panel, Group, Separator } from 'react-resizable-panels';
+import { Toolbar } from './modules/Nav';
+import { Toaster } from 'sonner';
+const Provider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      {children}
+      <Toaster position="bottom-right" richColors />
+    </>
+  );
+};
+export const App = () => {
+  return (
+    <Provider>
+      <AIEditor />
+    </Provider>
+  );
+};
+
+export const SidebarApp = () => {
+  return (
+    <Provider>
+      <Sidebar />
+    </Provider>
+  );
+};
+
+export const AIEditor = () => {
+  return (
+    <div className='h-screen w-full flex flex-col bg-white dark:bg-black text-gray-900 dark:text-gray-100'>
+      <div className='h-16 shrink-0 text-xl font-bold border-b border-gray-200 dark:border-gray-800 p-3 flex gap-2 items-center bg-gray-50 dark:bg-gray-950'>
+        <span className='font-mono text-sm tracking-tight'>Codepod</span>
+        <Toolbar />
+      </div>
+      <div className='flex-1 min-h-0'>
+        <Group orientation="horizontal">
+          <Panel minSize={200} defaultSize={240} maxSize={400}>
+            <Sidebar />
+          </Panel>
+          <Separator className='bg-gray-200 dark:bg-gray-800 w-px' />
+          <Panel minSize={30}>
+            <Content />
+          </Panel>
+        </Group>
+      </div>
+    </div>
+  );
+};

src/apps/ai-editor/modules/Nav.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@/components/ui/button';
+import { useMenuStore } from '../store/menu';
+import { useShallow } from 'zustand/shallow';
+import { useEditStore } from '../store/edit';
+import { Save } from 'lucide-react';
+
+export const Toolbar = () => {
+  const store = useMenuStore(
+    useShallow((state) => {
+      return {
+        onSaveText: state.onSaveText,
+      };
+    }),
+  );
+  const editStore = useEditStore(
+    useShallow((state) => {
+      return {
+        type: state.type,
+        setType: state.setType,
+      };
+    }),
+  );
+
+  return (
+    <div className='optrate-bar flex-1 flex justify-end items-center gap-2 h-full'>
+      <div className=''>
+        {editStore.type && (
+          <Button size={'sm'} variant='ghost' onClick={() => store.onSaveText()}>
+            <Save className='w-4 h-4' />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};

src/apps/ai-editor/modules/get-content-type.ts

@@ -0,0 +1,43 @@
+export const checkText = (filepath: string) => {
+  const textExtensions = [
+    '.txt',
+    '.md',
+    '.json',
+    '.js',
+    '.ts',
+    '.html',
+    '.css',
+    '.xml',
+    '.csv',
+
+    '.tsx',
+    '.jsx',
+    '.mjs',
+    '.cjs',
+    '.vue',
+
+    '.yaml',
+    '.yml',
+    '.log',
+    '.conf',
+    '.env',
+    '.example', //
+  ];
+
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp', '.ico'];
+  const pdfExtensions = ['.pdf'];
+
+  const extension = filepath.split('.').pop()?.toLowerCase();
+
+  if (textExtensions.includes(`.${extension}`)) {
+    return { type: 'text' as const };
+  }
+  if (imageExtensions.includes(`.${extension}`)) {
+    return { type: 'image' as const };
+  }
+  if (pdfExtensions.includes(`.${extension}`)) {
+    return { type: 'pdf' as const };
+  }
+
+  return { type: 'unsupported' as const };
+};

src/apps/ai-editor/preview/ImagePreview.tsx

@@ -0,0 +1,18 @@
+interface ImagePreviewProps {
+  src: string;
+  alt?: string;
+}
+
+export const ImagePreview: React.FC<ImagePreviewProps> = ({ src, alt }) => {
+  return (
+    <div className='h-full w-full flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900'>
+      <div className='relative max-w-full max-h-full'>
+        <img
+          src={src}
+          alt={alt || 'Image preview'}
+          className='max-w-full max-h-[calc(100vh-120px)] object-contain rounded-lg shadow-lg'
+        />
+      </div>
+    </div>
+  );
+};

src/apps/ai-editor/preview/PdfPreview.tsx

@@ -0,0 +1,19 @@
+interface PdfPreviewProps {
+  src: string;
+  fileName?: string;
+}
+
+export const PdfPreview: React.FC<PdfPreviewProps> = ({ src, fileName }) => {
+  return (
+    <div className='h-full w-full flex flex-col bg-gray-50 dark:bg-gray-900'>
+      <div className='flex-1 w-full'>
+        <embed
+          src={src}
+          type='application/pdf'
+          className='w-full h-full'
+          title={fileName}
+        />
+      </div>
+    </div>
+  );
+};

src/apps/ai-editor/sidebar.tsx

@@ -0,0 +1,455 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { File, Folder, ChevronRight, ChevronDown, Loader2, FilePlus, FolderPlus, Trash2, Rocket, Upload, Pencil } from 'lucide-react';
+import { useMenuStore, init, queryResources } from './store/menu.ts';
+import { toast } from 'sonner';
+import type { MenuItem } from './store/menu.ts';
+import { isSemVer } from './utils/version.ts';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+
+// 辅助函数：获取目录的直接子项
+const getDirectChildren = (path: string, menu: MenuItem[]): MenuItem[] => {
+  const pathPrefix = path ? path + '/' : '';
+
+  return menu.filter((item) => {
+    if (!item.path.startsWith(pathPrefix)) return false;
+    if (item.path === path) return false;
+
+    const relativePath = item.path.slice(pathPrefix.length);
+    return !relativePath.includes('/');
+  });
+};
+
+interface DirectoryItemProps {
+  item: MenuItem;
+  level: number;
+  prefix?: string;
+}
+
+// 上传文件组件
+const UploadFileItem: React.FC<{ parentPath: string }> = ({ parentPath }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { refreshMenu } = useMenuStore();
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    console.log('Selected file:', file);
+    if (!file) return;
+
+    const loadingToast = toast.loading('正在上传文件...');
+    const path = parentPath ? `${parentPath}/${file.name}` : file.name;
+
+    try {
+      const res = await queryResources.uploadFile(path, file);
+      toast.dismiss(loadingToast);
+      if (res.code === 200) {
+        toast.success('上传成功');
+        await refreshMenu();
+      } else {
+        toast.error(`上传失败: ${res.message}`);
+      }
+    } catch (error) {
+      toast.dismiss(loadingToast);
+      toast.error('上传失败');
+    }
+
+    // 重置 input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <>
+      <ContextMenuItem
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          fileInputRef.current?.click();
+        }}>
+        <Upload className='mr-2 h-4 w-4' />
+        上传文件
+      </ContextMenuItem>
+      <input
+        type='file'
+        ref={fileInputRef}
+        className='hidden'
+        onChange={handleFileChange}
+      />
+    </>
+  );
+};
+
+const ContextMenuDialogItem: React.FC<{
+  icon: React.ReactNode;
+  label: string;
+  title: string;
+  onConfirm: (name: string) => Promise<void>;
+}> = ({ icon, label, title, onConfirm }) => {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleOpen = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOpen(true);
+  };
+
+  const handleConfirm = async () => {
+    if (!inputValue.trim()) return;
+    await onConfirm(inputValue.trim());
+    setOpen(false);
+    setInputValue('');
+  };
+
+  return (
+    <>
+      <ContextMenuItem onSelect={handleOpen}>
+        {icon}
+        {label}
+      </ContextMenuItem>
+      <Dialog open={open} onOpenChange={(v) => { if (!v) setInputValue(''); setOpen(v); }}>
+        <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <Input
+            placeholder='请输入名称'
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleConfirm();
+              }
+            }}
+            autoFocus
+          />
+          <DialogFooter>
+            <Button variant='outline' onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirm} disabled={!inputValue.trim()}>
+              确定
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+// 重命名组件
+const RenameItem: React.FC<{
+  path: string;
+  originalName: string;
+  onRename: (oldPath: string, newName: string) => Promise<void>;
+}> = ({ path, originalName, onRename }) => {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(originalName);
+
+  const handleOpen = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOpen(true);
+  };
+
+  const handleConfirm = async () => {
+    const newName = inputValue.trim();
+    if (!newName || newName === originalName) {
+      setOpen(false);
+      return;
+    }
+    await onRename(path, newName);
+    setOpen(false);
+    setInputValue(originalName);
+  };
+
+  return (
+    <>
+      <ContextMenuItem onSelect={handleOpen}>
+        <Pencil className='mr-2 h-4 w-4' />
+        重命名
+      </ContextMenuItem>
+      <Dialog open={open} onOpenChange={(v) => { if (!v) setInputValue(originalName); setOpen(v); }}>
+        <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+          <DialogHeader>
+            <DialogTitle>重命名</DialogTitle>
+          </DialogHeader>
+          <Input
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleConfirm();
+              }
+            }}
+            autoFocus
+          />
+          <DialogFooter>
+            <Button variant='outline' onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirm} disabled={!inputValue.trim() || inputValue.trim() === originalName}>
+              确定
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+const DirectoryItem: React.FC<DirectoryItemProps> = ({ item, level, prefix }) => {
+  const [expanded, setExpanded] = useState(false);
+  const { menu, createFile, createDirectory, deleteItem, renameItem } = useMenuStore();
+  const children = useMemo(() => {
+    const children = getDirectChildren(item.path, menu);
+    return children.sort((a, b) => {
+      if (a.type === 'directory' && b.type === 'file') return -1;
+      if (a.type === 'file' && b.type === 'directory') return 1;
+      return a.path.localeCompare(b.path);
+    });
+  }, [menu, item.path]);
+  const directory = item.path.replace(prefix || '', '').replace(/\/$/, '') || '/';
+  const newPrefix = item.path + '/';
+
+  const handleDelete = async () => {
+    const path = item.type === 'directory' ? `${item.path}/` : item.path;
+    await deleteItem(path);
+  };
+
+  const handleRename = async (oldPath: string, newName: string) => {
+    const parts = oldPath.split('/');
+    parts.pop();
+    const parentPath = parts.join('/');
+    const newPath = parentPath ? `${parentPath}/${newName}/` : `${newName}/`;
+    await renameItem(oldPath + '/', newPath);
+  };
+
+  const handleDeploy = async () => {
+    console.log('Deploy app with version:', item.path);
+    toast.info('正在部署应用，部署功能尚未实现');
+  };
+
+  // 判断文件夹名是否为版本号格式 (如 v1.0.0, 1.0.0)
+  const isVersionNumber = isSemVer(directory);
+
+  return (
+    <div>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <div
+            className='flex items-center cursor-pointer py-1.5 px-2 hover:bg-gray-100 dark:hover:bg-gray-900 rounded group transition-colors shrink-0'
+            style={{ paddingLeft: `${level * 12}px` }}
+            onClick={() => setExpanded(!expanded)}>
+            <div className='flex items-center shrink-0'>
+              {children.length > 0 ? (
+                expanded ? (
+                  <ChevronDown className='w-4 h-4 text-gray-400' />
+                ) : (
+                  <ChevronRight className='w-4 h-4 text-gray-400' />
+                )
+              ) : (
+                <div className='w-4 h-4' />
+              )}
+            </div>
+            <Folder className='w-4 h-4 ml-2 mr-1.5 text-gray-600 dark:text-gray-400 shrink-0' />
+            <span className='text-sm truncate text-gray-700 dark:text-gray-300 min-w-0 flex-1'>{directory}</span>
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent className='w-48 border-gray-200 dark:border-gray-700'>
+          {isVersionNumber && (
+            <>
+              <ContextMenuItem onClick={handleDeploy}>
+                <Rocket className='mr-2 h-4 w-4' />
+                部署应用
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+            </>
+          )}
+          <ContextMenuDialogItem
+            icon={<FilePlus className='mr-2 h-4 w-4' />}
+            label='新建文件'
+            title='新建文件'
+            onConfirm={async (name) => {
+              await createFile(item.path, name);
+            }}
+          />
+          <ContextMenuDialogItem
+            icon={<FolderPlus className='mr-2 h-4 w-4' />}
+            label='新建文件夹'
+            title='新建文件夹'
+            onConfirm={async (name) => {
+              await createDirectory(item.path, name);
+            }}
+          />
+          <UploadFileItem parentPath={item.path} />
+          <RenameItem path={item.path} originalName={directory} onRename={handleRename} />
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={handleDelete} className='text-red-600 focus:text-red-600'>
+            <Trash2 className='mr-2 h-4 w-4' />
+            删除
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+
+      {expanded && children.length > 0 && (
+        <div className='ml-2'>
+          {children.map((child) =>
+            child.type === 'directory' ? (
+              <DirectoryItem key={child.path} item={child} prefix={newPrefix} level={level + 1} />
+            ) : (
+              <FileItem key={child.path} item={child} prefix={newPrefix} level={level + 1} />
+            ),
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface FileItemProps {
+  item: MenuItem;
+  level: number;
+  prefix?: string;
+}
+
+const FileItem: React.FC<FileItemProps> = ({ item, level }) => {
+  const { currentPath, setCurrentPath, deleteItem, renameItem } = useMenuStore();
+
+  const handleDelete = async () => {
+    await deleteItem(item.path);
+  };
+
+  const handleRename = async (oldPath: string, newName: string) => {
+    const parts = oldPath.split('/');
+    parts.pop();
+    const parentPath = parts.join('/');
+    const newPath = parentPath ? `${parentPath}/${newName}` : newName;
+    await renameItem(oldPath, newPath);
+  };
+
+  const fileName = item.path.split('/').pop() || '';
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          className={`flex items-center cursor-pointer py-1.5 px-2 hover:bg-gray-100 dark:hover:bg-gray-900 rounded transition-colors shrink-0 ${currentPath === item.path ? 'bg-gray-100 dark:bg-gray-900' : ''
+            }`}
+          style={{ paddingLeft: `${level * 12}px` }}
+          onClick={() => setCurrentPath(item.path)}>
+          <div className='flex items-center shrink-0'>
+            <div className='w-4 h-4' />
+          </div>
+          <File className='w-4 h-4 ml-2 mr-1.5 text-gray-500 dark:text-gray-400 shrink-0' />
+          <span className='text-sm truncate text-gray-700 dark:text-gray-300 min-w-0 flex-1'>{fileName}</span>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className='w-48 border-gray-200 dark:border-gray-700'>
+        <RenameItem path={item.path} originalName={fileName} onRename={handleRename} />
+        <ContextMenuItem onClick={handleDelete} className='text-red-600 focus:text-red-600'>
+          <Trash2 className='mr-2 h-4 w-4' />
+          删除
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export const getFolder = () => {
+  const url = new URL(window.location.href);
+  const searchParams = url.searchParams;
+  const folder = searchParams.get('folder') || '';
+  return folder;
+};
+
+const RootContextMenu: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { createFile, createDirectory } = useMenuStore();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent className='w-48 border-gray-200 dark:border-gray-700'>
+        <ContextMenuDialogItem
+          icon={<FilePlus className='mr-2 h-4 w-4' />}
+          label='新建文件'
+          title='新建文件'
+          onConfirm={async (name) => {
+            await createFile('', name);
+          }}
+        />
+        <ContextMenuDialogItem
+          icon={<FolderPlus className='mr-2 h-4 w-4' />}
+          label='新建文件夹'
+          title='新建文件夹'
+          onConfirm={async (name) => {
+            await createDirectory('', name);
+          }}
+        />
+        <UploadFileItem parentPath='' />
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+export const Sidebar: React.FC = () => {
+  const { menu, isLoading } = useMenuStore();
+  useEffect(() => {
+    const folder = getFolder();
+    init('', folder);
+  }, []);
+
+  const rootItems = useMemo(() => {
+    const _menu = menu.filter((item) => {
+      return !item.path.includes('/');
+    });
+    return _menu.sort((a, b) => {
+      if (a.type === 'directory' && b.type === 'file') return -1;
+      if (a.type === 'file' && b.type === 'directory') return 1;
+      return a.path.localeCompare(b.path);
+    });
+  }, [menu]);
+
+  return (
+    <div className='border-r border-gray-200 dark:border-gray-800 w-full min-h-screen bg-gray-50 dark:bg-black h-full'>
+      <div className='flex items-center justify-between mb-2 px-2 py-3 border-b border-gray-200 dark:border-gray-800'>
+        <h2 className='text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider'>文件</h2>
+        {isLoading && <Loader2 className='w-4 h-4 animate-spin text-gray-400' />}
+      </div>
+      <div className='overflow-y-auto scrollbar p-2' style={{ maxHeight: 'calc(100% - 68px)' }}>
+        {menu.length === 0 && !isLoading ? (
+          <div className='text-sm text-gray-400 px-2'>暂无文件</div>
+        ) : (
+          <RootContextMenu>
+            <div className='space-y-0.5'>
+              {rootItems.map((item) =>
+                item.type === 'directory' ? (
+                  <DirectoryItem key={item.path} item={item} level={1} />
+                ) : (
+                  <FileItem key={item.path} item={item} level={1} />
+                ),
+              )}
+            </div>
+          </RootContextMenu>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/apps/ai-editor/store/edit.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+import { Chain } from '@kevisual/codemirror/utils';
+
+export const chain = new Chain();
+
+interface EditState {
+  type: string;
+  value: string;
+  isEditing: boolean;
+  setType: (type: string) => void;
+  setValue: (value: string) => void;
+  setEditing: (status: boolean) => void;
+}
+
+export const useEditStore = create<EditState>((set) => ({
+  type: '',
+  value: '',
+  isEditing: false,
+
+  setType: (type) => set({ type }),
+  setValue: (value) => {
+    set({ value });
+    chain.setContent(value);
+  },
+  setEditing: (isEditing) => set({ isEditing }),
+}));

src/apps/ai-editor/store/menu.ts

@@ -0,0 +1,288 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query';
+import { QueryLoginBrowser } from '@kevisual/api/login';
+import { QueryResources } from '@kevisual/api/resources';
+import { toast } from 'sonner';
+import { Chain } from '@kevisual/codemirror/utils';
+export const chain = new Chain();
+
+export const queryLogin = new QueryLoginBrowser({ query });
+export const queryResources = new QueryResources({
+  prefix: '/root/resources/',
+});
+
+export type MenuItem = {
+  type: 'file' | 'directory';
+  name?: string; // type === 'file'
+  prefix?: string; // type === 'directory'
+  etag?: string;
+  lastModified?: string; // ISO date string
+  size: number;
+  url: string;
+  path: string; // a/b/file.md
+  pathname: string;
+};
+
+export type Menu = MenuItem[];
+
+// 右键菜单状态类型
+export interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  item: MenuItem | null;
+  parentPath: string | null;
+}
+
+interface MenuState {
+  menu: Menu;
+  currentPath: string | null;
+  isLoading: boolean;
+  contextMenu: ContextMenuState;
+  setMenu: (menu: Menu) => void;
+  setCurrentPath: (path: string | null) => void;
+  setLoading: (status: boolean) => void;
+  setContextMenu: (state: Partial<ContextMenuState> | null) => void;
+  onSaveText: () => Promise<any>;
+  createFile: (parentPath: string, name: string) => Promise<boolean>;
+  createDirectory: (parentPath: string, name: string) => Promise<boolean>;
+  deleteItem: (path: string) => Promise<boolean>;
+  renameItem: (oldPath: string, newPath: string) => Promise<boolean>;
+  refreshMenu: () => Promise<void>;
+}
+
+export const useMenuStore = create<MenuState>((set, get) => ({
+  menu: [],
+  currentPath: null,
+  isLoading: false,
+  contextMenu: {
+    visible: false,
+    x: 0,
+    y: 0,
+    item: null,
+    parentPath: null,
+  },
+  setMenu: (menu) => set({ menu }),
+  setCurrentPath: (currentPath) => set({ currentPath }),
+  setLoading: (isLoading) => set({ isLoading }),
+  setContextMenu: (state) => {
+    if (state === null) {
+      set({
+        contextMenu: { visible: false, x: 0, y: 0, item: null, parentPath: null },
+      });
+    } else {
+      set((prev) => ({
+        contextMenu: { ...prev.contextMenu, ...state },
+      }));
+    }
+  },
+  onSaveText: async () => {
+    const { currentPath } = get();
+    const content = chain.getContent();
+    console.log('path', currentPath);
+    console.log('Saving content:', content);
+    const res = await postContent(currentPath!, content);
+  },
+  createFile: async (parentPath: string, name: string) => {
+    const path = parentPath ? `${parentPath}/${name}` : name;
+    const loadingToast = toast.loading('正在创建文件...');
+    const res = await queryResources.uploadFile(path, '');
+    toast.dismiss(loadingToast);
+    if (res.code === 200) {
+      toast.success('文件创建成功');
+      await get().refreshMenu();
+      return true;
+    } else {
+      toast.error(`创建文件失败: ${res.message}`);
+      return false;
+    }
+  },
+  createDirectory: async (parentPath: string, name: string) => {
+    const path = parentPath ? `${parentPath}/${name}` : name;
+    const loadingToast = toast.loading('正在创建文件夹...');
+    const res = await queryResources.createFolder(path);
+    toast.dismiss(loadingToast);
+    if (res.code === 200) {
+      toast.success('文件夹创建成功');
+      await get().refreshMenu();
+      return true;
+    } else {
+      toast.error(`创建文件夹失败: ${res.message}`);
+      return false;
+    }
+  },
+  renameItem: async (oldPath: string, newPath: string) => {
+    const loadingToast = toast.loading('正在重命名...');
+    const res = await queryResources.rename(oldPath, newPath);
+    toast.dismiss(loadingToast);
+    if (res.code === 200) {
+      toast.success('重命名成功');
+      const { currentPath } = get();
+      if (currentPath === oldPath) {
+        const parts = oldPath.split('/');
+        parts.pop();
+        const newCurrentPath = parts.length > 0 ? `${parts.join('/')}/${newPath}` : newPath;
+        set({ currentPath: newCurrentPath });
+      }
+      await get().refreshMenu();
+      return true;
+    } else {
+      toast.error(`重命名失败: ${res.message}`);
+      return false;
+    }
+  },
+  deleteItem: async (path: string) => {
+    const loadingToast = toast.loading('正在删除...');
+    const res = await queryResources.deleteFile(path);
+    toast.dismiss(loadingToast);
+    if (res.code === 200) {
+      toast.success('删除成功');
+      const { currentPath } = get();
+      if (currentPath === path) {
+        set({ currentPath: null });
+      }
+      await get().refreshMenu();
+      return true;
+    } else {
+      toast.error(`删除失败: ${res.message}`);
+      return false;
+    }
+  },
+  refreshMenu: async () => {
+    const { setMenu, setLoading } = useMenuStore.getState();
+    setLoading(true);
+    try {
+      const res = await queryResources.getList('', { recursive: true });
+      if (res.code === 200) {
+        const menu = res.data!.map((item: any) => ({
+          ...item,
+          type: item.prefix ? 'directory' : 'file',
+        }));
+
+        // 添加缺失的目录项
+        const obj: Record<string, any> = {};
+        menu.forEach((item) => {
+          if (item.type === 'file') {
+            const parts = item.path.split('/');
+            const dirParts = parts.slice(0, -1);
+            for (let i = 0; i < dirParts.length; i++) {
+              const dir = dirParts.slice(0, i + 1).join('/');
+              if (!dir) continue;
+              obj[dir] = obj[dir] || { type: 'directory', path: dir };
+            }
+          }
+        });
+        Object.keys(obj).forEach((key) => {
+          if (!menu.find((m) => m.path === key)) {
+            menu.push(obj[key]);
+          }
+        });
+
+        setMenu(menu);
+      }
+    } finally {
+      setLoading(false);
+    }
+  },
+}));
+
+class Status {
+  isInitialized = false;
+  username = '';
+}
+const status = new Status();
+
+export const init = async (resource: string = '', prefix: string = '') => {
+  console.log('init menu', resource, prefix);
+  const { setMenu, setCurrentPath, setLoading } = useMenuStore.getState();
+  let me = await queryLogin.checkLocalUser();
+  const isInitialized = status.isInitialized;
+  if (!isInitialized && me) {
+    status.isInitialized = true;
+    status.username = me.username!;
+    queryResources.setUsername(status.username);
+  }
+  let recursive = true;
+  const data = {};
+  if (recursive) {
+    data['recursive'] = recursive;
+  }
+  if (prefix) {
+    queryResources.setPrefix(prefix);
+  }
+  console.log('queryResources', queryResources.prefix);
+  const res = await queryResources.getList(resource, data);
+  // @ts-ignore
+  if (res?.status === 404) {
+    toast.error('资源不存在，请检查路径是否正确');
+    return;
+  }
+  if (res.code === 200) {
+    const menu = res.data!.map((item: any) => {
+      if (item.prefix) {
+        item.type = 'directory';
+      } else {
+        item.type = 'file';
+      }
+      return item;
+    });
+    console.log('init menu', menu);
+    if (recursive) {
+      const obj: Record<string, any> = {};
+      menu.forEach((item) => {
+        const parts = item.path.split('/');
+        const dirParts = parts.slice(0, -1);
+        for (let i = 0; i < dirParts.length; i++) {
+          const dir = dirParts.slice(0, i + 1).join('/');
+          if (!dir) continue; // skip root
+          obj[dir] = obj[dir] || { type: 'directory', path: dir };
+        }
+      });
+      Object.keys(obj).forEach((key) => {
+        const item = obj[key];
+        menu.push(item);
+      });
+    }
+    setMenu(menu);
+    setCurrentPath('');
+  }
+};
+
+export const getCurrentContent = async (currentPath: string): Promise<string | null> => {
+  if (!currentPath) return null;
+  const loadingToast = toast.loading('正在加载文件内容...');
+  const res = await queryResources.fetchFile(currentPath);
+  toast.dismiss(loadingToast);
+  if (res.code === 200) {
+    return res.data || '';
+  } else {
+    console.error('Error fetching content:', res.message);
+    toast.error(`获取内容失败: ${res.message}`);
+    return null;
+  }
+};
+
+export const postContent = async (currentPath: string, content: string): Promise<boolean> => {
+  if (!currentPath) return false;
+  const loadingToast = toast.loading('正在保存...');
+  const res = await queryResources.uploadFile(currentPath, content);
+  toast.dismiss(loadingToast);
+  console.log('postContent', res);
+  if (res.code === 200) {
+    toast.success('内容保存成功');
+    return true;
+  } else {
+    console.error('Error saving content:', res.message);
+    toast.error(`保存内容失败: ${res.message}`);
+    return false;
+  }
+};
+
+export const getFileUrl = async (currentPath: string): Promise<string> => {
+  if (!currentPath) return '';
+  const res = await queryResources.fetchFile(currentPath);
+  if (res instanceof Response && res.ok) {
+    return URL.createObjectURL(await res.blob());
+  }
+  return '';
+};

src/apps/ai-editor/utils/version.ts

@@ -0,0 +1,13 @@
+// 简单实用的版本
+export function isSemVer(version) {
+    if (typeof version !== 'string') return false;
+    
+    // 移除可能的 v 前缀
+    if (version.toLowerCase().startsWith('v')) {
+        version = version.slice(1);
+    }
+    
+    // 完整的 SemVer 格式验证
+    const semverRegex = /^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?$/;
+    return semverRegex.test(version);
+}

src/components/html/blank.astro

@@ -0,0 +1,24 @@
+---
+
+---
+
+<html lang='zh-CN'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Pages</title>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/components/ui/button.tsx

@@ -0,0 +1,53 @@
+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-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-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',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+export type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return <Comp data-slot='button' className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };

src/components/ui/command.tsx

@@ -0,0 +1,175 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/context-menu.tsx

@@ -0,0 +1,250 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/form.tsx

@@ -0,0 +1,165 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/select.tsx

@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]: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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "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}
+    />
+  )
+}
+
+export { Textarea }

src/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/content.config.ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+import { defineCollection, z } from 'astro:content';
+import { glob, file } from 'astro/loaders'; // 不适用于旧版 API
+
+const blog = defineCollection({
+  // loader: glob({ pattern: '**/*.md', base: './src/data/blogs' }),
+  loader: glob({ pattern: '**/[^_]*.md', base: './src/data/blogs' }),
+  schema: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    // pubDate: z.coerce.date(),
+    // updatedDate: z.coerce.date().optional(),
+  }),
+});
+
+const kevisual = defineCollection({
+  // loader: glob({ pattern: '**/*.md', base: './src/data/blogs' }),
+  loader: glob({ pattern: '**/[^_]*.md', base: './src/data/kevisual' }),
+  schema: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    // pubDate: z.coerce.date(),
+    // updatedDate: z.coerce.date().optional(),
+  }),
+});
+export const collections = { blog, kevisual };

src/data/README.md

@@ -0,0 +1,8 @@
+# kevisual 
+
+## 介绍
+
+visual 是可视化
+ke 代表是 可以
+
+kevisual 就是为了可视化而生的工具。

src/lib/random.ts

@@ -0,0 +1,26 @@
+import { customAlphabet } from 'nanoid';
+
+export const letter = 'abcdefghijklmnopqrstuvwxyz';
+export const number = '0123456789';
+const alphanumeric = `${letter}${number}`;
+export const alphanumericWithDash = `${alphanumeric}-`;
+export const uuid = customAlphabet(letter);
+
+export const nanoid = customAlphabet(alphanumeric, 10);
+
+export const nanoidWithDash = customAlphabet(alphanumericWithDash, 10);
+
+/**
+ * 创建一个随机的 id，以字母开头的字符串
+ * @param number
+ * @returns
+ */
+export const randomId = (number: number) => {
+  const _letter = uuid(1);
+  return `${_letter}${nanoid(number)}`;
+};
+
+export const randomLetter = (number: number = 8, opts?: { before?: string; after?: string }) => {
+  const { before = '', after = '' } = opts || {};
+  return `${before}${uuid(number)}${after}`;
+};

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/modules/basename.ts

@@ -0,0 +1,4 @@
+// @ts-ignore
+export const basename = BASE_NAME;
+
+console.log(basename);

src/modules/query.ts

@@ -0,0 +1,28 @@
+import { toast } from 'sonner';
+import { QueryClient } from '@kevisual/query';
+import { QueryLoginBrowser } from '@kevisual/api/login';
+export const query = new QueryClient({});
+console.log('初始化 query', query);
+export const clientQuery = new QueryClient({});
+
+export const queryLogin = new QueryLoginBrowser({
+  query: query as any,
+});
+
+query.beforeRequest = queryLogin.beforeRequest.bind(queryLogin);
+query.afterResponse = async (res, ctx) => {
+  const newRes = await queryLogin.run401Action(res, ctx, {
+    afterAlso401: () => {
+    },
+    afterCheck: (res) => {
+      console.log('afterCheck', res);
+      if (res.code === 200) {
+        toast.success('刷新登陆信息');
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      }
+    },
+  });
+  return newRes as any;
+};

src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import '@/styles/global.css';
+import '@/styles/theme.css';
+import Blank from '@/components/html/blank.astro';
+import { App } from '@/apps/ai-editor';
+---
+
+<Blank>
+  <App client:only />
+</Blank>

src/pages/sidebar.astro

@@ -0,0 +1,10 @@
+---
+import '@/styles/global.css';
+import '@/styles/theme.css';
+import Blank from '@/components/html/blank.astro';
+import { SidebarApp } from '@/apps/ai-editor';
+---
+
+<Blank>
+  <SidebarApp client:only />
+</Blank>

src/styles/global.css

@@ -0,0 +1,121 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@import "./theme.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --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);
+}
+
+.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/styles/theme.css

@@ -0,0 +1,85 @@
+@import 'tailwindcss';
+
+@theme {
+  /* --color-primary: #ffc107;
+  --color-secondary: #ffa000;
+  --color-text-primary: #000000;
+  --color-text-secondary: #000000;
+  --color-success: #28a745; */
+
+  --color-scrollbar-thumb: #999999;
+  --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+  --color-scrollbar-thumb-hover: #666666;
+  --scrollbar-color: #ffc107; 
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 4px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
+  }
+}
+
+.dark {
+  --color-scrollbar-thumb: #4a4a4a;
+  --color-scrollbar-track: rgba(255, 255, 255, 0.05);
+  --color-scrollbar-thumb-hover: #666666;
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@kevisual/types/json/frontend.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+  },
+  "include": [
+    "src/**/*",
+  ],
+}