Dockerfile

.gitattributes

@@ -1 +0,0 @@
-knot-studio.zip filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,32 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-.output
-.vinxi
-.tanstack/**
-.nitro
-*.local
-
-# Wrangler / Cloudflare
-.wrangler/
-.dev.vars
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

.prettierignore

@@ -1,8 +0,0 @@
-node_modules
-dist
-.output
-.vinxi
-pnpm-lock.yaml
-package-lock.json
-bun.lock
-routeTree.gen.ts

.prettierrc

@@ -1,6 +0,0 @@
-{
-  "printWidth": 100,
-  "semi": true,
-  "singleQuote": false,
-  "trailingComma": "all"
-}

AGENTS.md

@@ -1,10 +0,0 @@
-<!-- LOVABLE:BEGIN -->
-> [!IMPORTANT]
-> This project is connected to [Lovable](https://lovable.dev). Avoid rewriting
-> published git history — force pushing, or rebasing/amending/squashing commits
-> that are already pushed — as it rewrites history on Lovable's side and the
-> user will likely lose their project history.
->
-> Commits you push to the connected branch sync back to Lovable and show up in
-> the editor, so keep the branch in a working state.
-<!-- LOVABLE:END -->

Dockerfile

@@ -1,17 +0,0 @@
-FROM node:20-slim
-
-WORKDIR /app
-
-COPY package*.json bun.lock* ./
-
-RUN npm install -g bun && bun install
-
-COPY . .
-
-RUN bun run build
-
-RUN npm install -g serve
-
-EXPOSE 7860
-
-CMD ["serve", "-s", "dist", "-l", "7860"]

README.md

@@ -1,8 +0,0 @@
----
-title: Test
-emoji: 🚀
-colorFrom: blue
-colorTo: indigo
-sdk: docker
-app_port: 7860
----

bunfig.toml

@@ -1,7 +0,0 @@
-[install]
-saveTextLockfile = true
-# 24h supply-chain guard: skip package versions published less than a day ago.
-minimumReleaseAge = 86400
-# Each entry bypasses the 24h guard for one package — confirm with the user
-# before adding any.
-minimumReleaseAgeExcludes = ["@lovable.dev/vite-tanstack-config", "@lovable.dev/mcp-js", "@lovable.dev/vite-plugin-dev-server-bridge", "@lovable.dev/vite-plugin-hmr-gate", "@lovable.dev/email-js", "@lovable.dev/webhooks-js"]

components.json

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

components/studio/AdminPanel.tsx

@@ -1,355 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { Check, Copy, FolderOpen, KeyRound, MessageSquare, RotateCcw, Trash2, UserPlus, Users } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  createUser,
-  deleteUser,
-  listUsers,
-  resetPassword,
-  roleLabel,
-  statusLabel,
-  type StoredUser,
-} from "@/lib/auth-service";
-import {
-  countProjectsByOwner,
-  formatStamp,
-  listProjects,
-  removeProjectsOfOwner,
-  type StoredProject,
-} from "@/lib/studio-storage";
-import { listFeedback, markFeedbackRead, removeFeedback, type FeedbackItem } from "@/lib/feedback-service";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-};
-
-export default function AdminPanel({ open, onOpenChange }: Props) {
-  const [users, setUsers] = useState<StoredUser[]>([]);
-  const [counts, setCounts] = useState<Record<string, number>>({});
-  const [createOpen, setCreateOpen] = useState(false);
-  const [newLogin, setNewLogin] = useState("");
-  const [createError, setCreateError] = useState<string | null>(null);
-  const [credentials, setCredentials] = useState<{ username: string; password: string } | null>(null);
-  const [toDelete, setToDelete] = useState<StoredUser | null>(null);
-  const [viewing, setViewing] = useState<{ user: StoredUser; items: StoredProject[] } | null>(null);
-  const [feedback, setFeedback] = useState<FeedbackItem[]>([]);
-
-  const refresh = useCallback(() => {
-    setUsers(listUsers());
-    setCounts(countProjectsByOwner());
-    setFeedback(listFeedback());
-  }, []);
-
-  useEffect(() => {
-    if (open) refresh();
-  }, [open, refresh]);
-
-  const totalProjects = Object.values(counts).reduce((a, b) => a + b, 0);
-  const activeUsers = users.filter((u) => u.status === "active").length;
-  const pendingUsers = users.length - activeUsers;
-
-  const copy = (value: string) => {
-    void navigator.clipboard?.writeText(value);
-  };
-
-  const submitCreate = () => {
-    const result = createUser(newLogin);
-    if (!result.ok) {
-      setCreateError(result.error);
-      return;
-    }
-    setCreateError(null);
-    setCreateOpen(false);
-    setNewLogin("");
-    setCredentials({ username: result.user.username, password: result.tempPassword });
-    refresh();
-  };
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-h-[88vh] max-w-5xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 font-display text-2xl">
-              <Users className="h-6 w-6 text-accent" /> Панель админа
-            </DialogTitle>
-            <DialogDescription>Управление пользователями студии и обзор сохранённых схем.</DialogDescription>
-          </DialogHeader>
-
-          <div className="grid gap-3 sm:grid-cols-5">
-            {[
-              { label: "Пользователей", value: users.length },
-              { label: "Активных", value: activeUsers },
-              { label: "Ожидают входа", value: pendingUsers },
-              { label: "Всего схем", value: totalProjects },
-              { label: "Новых пожеланий", value: feedback.filter((f) => !f.read).length },
-            ].map((s) => (
-              <div key={s.label} className="rounded-2xl border border-border bg-secondary p-4">
-                <p className="text-xs text-muted-foreground">{s.label}</p>
-                <p className="font-display text-3xl leading-tight">{s.value}</p>
-              </div>
-            ))}
-          </div>
-
-          <section className="rounded-2xl border border-border">
-            <h3 className="flex items-center gap-2 border-b border-border px-4 py-2 font-display text-lg">
-              <MessageSquare className="h-5 w-5 text-accent" /> Пожелания пользователей
-            </h3>
-            {feedback.length === 0 ? (
-              <p className="px-4 py-6 text-center text-sm text-muted-foreground">Пока нет сообщений.</p>
-            ) : (
-              <ul className="max-h-64 divide-y divide-border overflow-y-auto">
-                {feedback.map((f) => (
-                  <li key={f.id} className="flex items-start gap-3 px-4 py-2.5">
-                    <div className="min-w-0 flex-1">
-                      <p className="text-xs text-muted-foreground">
-                        {f.username} · {formatStamp(f.createdAt)}
-                        {!f.read && <Badge className="ml-2 align-middle">новое</Badge>}
-                      </p>
-                      <p className="whitespace-pre-wrap text-sm">{f.text}</p>
-                    </div>
-                    <div className="flex shrink-0 gap-1">
-                      {!f.read && (
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          className="h-8 w-8"
-                          title="Отметить прочитанным"
-                          onClick={() => setFeedback(markFeedbackRead(f.id))}
-                        >
-                          <Check className="h-4 w-4" />
-                        </Button>
-                      )}
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="h-8 w-8 text-destructive"
-                        title="Удалить сообщение"
-                        onClick={() => setFeedback(removeFeedback(f.id))}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </section>
-
-
-          <div>
-            <Button size="lg" className="h-12 gap-2" onClick={() => setCreateOpen(true)}>
-              <UserPlus className="h-5 w-5" /> Создать пользователя
-            </Button>
-          </div>
-
-          <div className="overflow-x-auto rounded-2xl border border-border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Логин</TableHead>
-                  <TableHead>Роль</TableHead>
-                  <TableHead>Создан</TableHead>
-                  <TableHead>Статус</TableHead>
-                  <TableHead>Схемы</TableHead>
-                  <TableHead className="text-right">Действия</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {users.map((u) => (
-                  <TableRow key={u.id}>
-                    <TableCell className="font-medium">{u.username}</TableCell>
-                    <TableCell>{roleLabel(u.role)}</TableCell>
-                    <TableCell className="text-muted-foreground">{formatStamp(u.createdAt)}</TableCell>
-                    <TableCell>
-                      <Badge variant={u.status === "active" ? "secondary" : "outline"}>{statusLabel(u.status)}</Badge>
-                    </TableCell>
-                    <TableCell>{counts[u.id] ?? 0}</TableCell>
-                    <TableCell>
-                      <div className="flex flex-wrap justify-end gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-10 gap-1"
-                          title="Сбросить пароль и выдать временный"
-                          onClick={() => {
-                            const password = resetPassword(u.id);
-                            setCredentials({ username: u.username, password });
-                            refresh();
-                          }}
-                        >
-                          <RotateCcw className="h-4 w-4" /> Сбросить пароль
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-10 gap-1"
-                          title="Просмотреть проекты пользователя"
-                          onClick={() => setViewing({ user: u, items: listProjects(u.id) })}
-                        >
-                          <FolderOpen className="h-4 w-4" /> Просмотреть проекты
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="sm"
-                          className="h-10 gap-1"
-                          disabled={u.role === "admin"}
-                          title={
-                            u.role === "admin" ? "Администратора удалить нельзя" : "Удалить пользователя и его схемы"
-                          }
-                          onClick={() => setToDelete(u)}
-                        >
-                          <Trash2 className="h-4 w-4" /> Удалить
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Создание пользователя */}
-      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-        <DialogContent className="max-w-sm">
-          <DialogHeader>
-            <DialogTitle className="font-display text-2xl">Создать пользователя</DialogTitle>
-            <DialogDescription>
-              Укажите логин — система выдаст одноразовый временный пароль для первого входа.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-2">
-            <Label htmlFor="new-user-login">Логин</Label>
-            <Input
-              id="new-user-login"
-              autoFocus
-              value={newLogin}
-              onChange={(e) => {
-                setNewLogin(e.target.value);
-                setCreateError(null);
-              }}
-              className="h-12"
-            />
-            {createError && <p className="text-sm text-destructive">{createError}</p>}
-          </div>
-          <Button size="lg" className="h-12 w-full" onClick={submitCreate}>
-            <UserPlus className="h-5 w-5" /> Создать и выдать пароль
-          </Button>
-        </DialogContent>
-      </Dialog>
-
-      {/* Показ временного пароля */}
-      <Dialog open={!!credentials} onOpenChange={(v) => !v && setCredentials(null)}>
-        <DialogContent className="max-w-sm">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 font-display text-2xl">
-              <KeyRound className="h-6 w-6 text-accent" /> Временный пароль
-            </DialogTitle>
-            <DialogDescription>
-              Передайте пароль пользователю «{credentials?.username}». При первом входе он задаст постоянный пароль.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex items-center gap-2">
-            <code className="flex-1 rounded-xl border border-border bg-secondary px-4 py-3 text-center text-lg tracking-widest">
-              {credentials?.password}
-            </code>
-            <Button
-              variant="outline"
-              size="lg"
-              className="h-12 gap-2"
-              title="Скопировать пароль"
-              onClick={() => credentials && copy(credentials.password)}
-            >
-              <Copy className="h-5 w-5" />
-            </Button>
-          </div>
-          <Button size="lg" className="h-12 w-full" onClick={() => setCredentials(null)}>
-            Готово
-          </Button>
-        </DialogContent>
-      </Dialog>
-
-      {/* Проекты пользователя */}
-      <Dialog open={!!viewing} onOpenChange={(v) => !v && setViewing(null)}>
-        <DialogContent className="max-h-[80vh] max-w-3xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="font-display text-2xl">Проекты «{viewing?.user.username}»</DialogTitle>
-            <DialogDescription>Схемы, сохранённые этим пользователем.</DialogDescription>
-          </DialogHeader>
-          {viewing && viewing.items.length === 0 ? (
-            <p className="py-8 text-center text-sm text-muted-foreground">У пользователя пока нет схем.</p>
-          ) : (
-            <div className="grid gap-4 sm:grid-cols-3">
-              {viewing?.items.map((p) => (
-                <article key={p.id} className="overflow-hidden rounded-2xl border border-border bg-card">
-                  <img
-                    src={p.thumb}
-                    alt={`Превью схемы «${p.title}»`}
-                    className="aspect-[4/3] w-full bg-secondary object-cover"
-                  />
-                  <div className="space-y-1 p-3">
-                    <h3 className="truncate font-medium">{p.title}</h3>
-                    <p className="text-xs text-muted-foreground">
-                      {formatStamp(p.updatedAt)} · элементов: {p.elements}
-                    </p>
-                  </div>
-                </article>
-              ))}
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
-      <AlertDialog open={!!toDelete} onOpenChange={(v) => !v && setToDelete(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Удалить пользователя?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Пользователь «{toDelete?.username}» и все его схемы будут удалены безвозвратно.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Отмена</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (toDelete) {
-                  removeProjectsOfOwner(toDelete.id);
-                  deleteUser(toDelete.id);
-                }
-                setToDelete(null);
-                refresh();
-              }}
-            >
-              Удалить
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}

components/studio/FeedbackDialog.tsx

@@ -1,52 +0,0 @@
-import { useState } from "react";
-import { MessageSquarePlus, Send } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Textarea } from "@/components/ui/textarea";
-import { addFeedback } from "@/lib/feedback-service";
-import type { StoredUser } from "@/lib/auth-service";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-  user: StoredUser;
-};
-
-export default function FeedbackDialog({ open, onOpenChange, user }: Props) {
-  const [text, setText] = useState("");
-  const [sent, setSent] = useState(false);
-
-  const submit = () => {
-    if (text.trim().length < 3) return;
-    addFeedback(user.id, user.username, text);
-    setText("");
-    setSent(true);
-    window.setTimeout(() => {
-      setSent(false);
-      onOpenChange(false);
-    }, 1200);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 font-display text-2xl">
-            <MessageSquarePlus className="h-5 w-5 text-accent" /> Чего не хватает?
-          </DialogTitle>
-          <DialogDescription>Напишите пожелание — оно придёт администратору студии.</DialogDescription>
-        </DialogHeader>
-        <Textarea
-          rows={4}
-          autoFocus
-          value={text}
-          placeholder="Например: добавьте элемент «трилистник» и печать на A3"
-          onChange={(e) => setText(e.target.value)}
-        />
-        <Button className="h-11 w-full gap-2" disabled={text.trim().length < 3} onClick={submit}>
-          <Send className="h-4 w-4" /> {sent ? "Отправлено!" : "Отправить"}
-        </Button>
-      </DialogContent>
-    </Dialog>
-  );
-}

components/studio/LoginDialog.tsx

@@ -1,155 +0,0 @@
-import { useState, type FormEvent } from "react";
-import { KeyRound, ShieldCheck } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { login, setPermanentPassword, type StoredUser } from "@/lib/auth-service";
-
-export default function LoginDialog({ onSignedIn }: { onSignedIn: (user: StoredUser) => void }) {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [remember, setRemember] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  /** Пользователь вошёл по временному паролю — требуется постоянный. */
-  const [pending, setPending] = useState<StoredUser | null>(null);
-  const [next, setNext] = useState("");
-  const [confirm, setConfirm] = useState("");
-
-  const submitLogin = (e: FormEvent) => {
-    e.preventDefault();
-    const result = login(username, password, remember);
-    if (!result.ok) {
-      setError(result.error);
-      return;
-    }
-    setError(null);
-    if (result.mustChangePassword) {
-      setPending(result.user);
-      return;
-    }
-    onSignedIn(result.user);
-  };
-
-  const submitNewPassword = (e: FormEvent) => {
-    e.preventDefault();
-    if (!pending) return;
-    if (next !== confirm) {
-      setError("Пароли не совпадают.");
-      return;
-    }
-    const result = setPermanentPassword(pending.id, next);
-    if (!result.ok) {
-      setError(result.error ?? "Не удалось сохранить пароль.");
-      return;
-    }
-    onSignedIn({ ...pending, temporary: false, status: "active" });
-  };
-
-  if (pending) {
-    return (
-      <Dialog open>
-        <DialogContent className="max-w-sm [&>button]:hidden">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 font-display text-2xl">
-              <ShieldCheck className="h-6 w-6 text-accent" /> Новый пароль
-            </DialogTitle>
-            <DialogDescription>
-              Вы вошли по временному паролю. Задайте постоянный пароль, чтобы продолжить работу.
-            </DialogDescription>
-          </DialogHeader>
-          <form onSubmit={submitNewPassword} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="new-password">Новый пароль</Label>
-              <Input
-                id="new-password"
-                autoFocus
-                type="password"
-                value={next}
-                onChange={(e) => {
-                  setNext(e.target.value);
-                  setError(null);
-                }}
-                className="h-12"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="confirm-password">Повторите пароль</Label>
-              <Input
-                id="confirm-password"
-                type="password"
-                value={confirm}
-                onChange={(e) => {
-                  setConfirm(e.target.value);
-                  setError(null);
-                }}
-                className="h-12"
-              />
-            </div>
-            {error && <p className="text-sm text-destructive">{error}</p>}
-            <Button type="submit" size="lg" className="h-12 w-full">
-              Сохранить и войти
-            </Button>
-          </form>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog open>
-      <DialogContent className="max-w-sm [&>button]:hidden">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 font-display text-2xl">
-            <KeyRound className="h-6 w-6 text-accent" /> RealKnot Studio
-          </DialogTitle>
-          <DialogDescription>Войдите в аккаунт, чтобы открыть студию и свои проекты.</DialogDescription>
-        </DialogHeader>
-        <form onSubmit={submitLogin} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="login">Логин</Label>
-            <Input
-              id="login"
-              autoFocus
-              autoComplete="username"
-              placeholder="admin"
-              value={username}
-              onChange={(e) => {
-                setUsername(e.target.value);
-                setError(null);
-              }}
-              className="h-12"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="password">Пароль</Label>
-            <Input
-              id="password"
-              type="password"
-              autoComplete="current-password"
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value);
-                setError(null);
-              }}
-              className="h-12"
-            />
-          </div>
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <label className="flex cursor-pointer items-center gap-2 text-sm">
-            <Checkbox checked={remember} onCheckedChange={(v) => setRemember(v === true)} />
-            Запомнить меня
-          </label>
-          <Button type="submit" size="lg" className="h-12 w-full">
-            Войти в студию
-          </Button>
-          <p className="text-center text-xs text-muted-foreground">
-            Аккаунт создаёт администратор в «Панели админа».
-          </p>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

components/studio/ProfileDialog.tsx

@@ -1,159 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Camera, FolderOpen, Save, UserRound } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { roleLabel, statusLabel, updateProfile, type StoredUser } from "@/lib/auth-service";
-import { formatStamp, listProjects, type StoredProject } from "@/lib/studio-storage";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-  user: StoredUser;
-  onUserChange: (u: StoredUser) => void;
-  onOpenProject: (p: StoredProject) => void;
-};
-
-export default function ProfileDialog({ open, onOpenChange, user, onUserChange, onOpenProject }: Props) {
-  const fileRef = useRef<HTMLInputElement | null>(null);
-  const [displayName, setDisplayName] = useState(user.displayName ?? user.username);
-  const [about, setAbout] = useState(user.about ?? "");
-  const [avatar, setAvatar] = useState(user.avatar ?? "");
-  const [items, setItems] = useState<StoredProject[]>([]);
-  const [savedAt, setSavedAt] = useState(0);
-
-  useEffect(() => {
-    if (!open) return;
-    setDisplayName(user.displayName ?? user.username);
-    setAbout(user.about ?? "");
-    setAvatar(user.avatar ?? "");
-    setItems(listProjects(user.id));
-  }, [open, user]);
-
-  const pickAvatar = (file: File) => {
-    const reader = new FileReader();
-    reader.onload = () => setAvatar(String(reader.result ?? ""));
-    reader.readAsDataURL(file);
-  };
-
-  const save = () => {
-    const next = updateProfile(user.id, { displayName: displayName.trim(), about: about.trim(), avatar });
-    if (next) onUserChange(next);
-    setSavedAt(Date.now());
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[88vh] max-w-3xl overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle className="font-display text-2xl">Профиль</DialogTitle>
-          <DialogDescription>Данные аккаунта, аватар и сохранённые работы.</DialogDescription>
-        </DialogHeader>
-
-        <input
-          ref={fileRef}
-          type="file"
-          accept="image/*"
-          className="hidden"
-          onChange={(e) => {
-            const f = e.target.files?.[0];
-            if (f) pickAvatar(f);
-            e.target.value = "";
-          }}
-        />
-
-        <div className="grid gap-4 sm:grid-cols-[auto_minmax(0,1fr)]">
-          <div className="flex flex-col items-center gap-2">
-            <div className="grid h-24 w-24 place-items-center overflow-hidden rounded-full border border-border bg-secondary">
-              {avatar ? (
-                <img src={avatar} alt="Аватар пользователя" className="h-full w-full object-cover" />
-              ) : (
-                <UserRound className="h-10 w-10 text-muted-foreground" />
-              )}
-            </div>
-            <Button variant="outline" size="sm" className="h-9 gap-1.5" onClick={() => fileRef.current?.click()}>
-              <Camera className="h-4 w-4" /> Аватар
-            </Button>
-          </div>
-
-          <div className="space-y-3">
-            <div className="grid gap-2 sm:grid-cols-2">
-              <div className="space-y-1.5">
-                <Label htmlFor="pf-name">Отображаемое имя</Label>
-                <Input id="pf-name" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
-              </div>
-              <div className="space-y-1.5">
-                <Label>Логин</Label>
-                <Input value={user.username} readOnly className="text-muted-foreground" />
-              </div>
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="pf-about">О себе</Label>
-              <Textarea
-                id="pf-about"
-                rows={3}
-                value={about}
-                placeholder="Например: плету салфетки и мандалы"
-                onChange={(e) => setAbout(e.target.value)}
-              />
-            </div>
-            <dl className="grid grid-cols-2 gap-2 text-xs sm:grid-cols-4">
-              {[
-                { k: "Роль", v: roleLabel(user.role) },
-                { k: "Статус", v: statusLabel(user.status) },
-                { k: "Создан", v: formatStamp(user.createdAt) },
-                { k: "Схем", v: String(items.length) },
-              ].map((s) => (
-                <div key={s.k} className="rounded-lg border border-border bg-secondary px-2 py-1.5">
-                  <dt className="text-muted-foreground">{s.k}</dt>
-                  <dd className="truncate font-medium">{s.v}</dd>
-                </div>
-              ))}
-            </dl>
-            <div className="flex items-center gap-2">
-              <Button size="sm" className="h-10 gap-1.5" onClick={save}>
-                <Save className="h-4 w-4" /> Сохранить профиль
-              </Button>
-              {savedAt > 0 && <span className="text-xs text-muted-foreground">Изменения сохранены</span>}
-            </div>
-          </div>
-        </div>
-
-        <div className="border-t border-border pt-3">
-          <h3 className="font-display text-lg">Мои работы</h3>
-          {items.length === 0 ? (
-            <p className="py-6 text-center text-sm text-muted-foreground">Пока нет сохранённых схем.</p>
-          ) : (
-            <div className="mt-2 grid gap-3 sm:grid-cols-3">
-              {items.map((p) => (
-                <article key={p.id} className="overflow-hidden rounded-xl border border-border bg-card">
-                  <img
-                    src={p.thumb}
-                    alt={`Превью схемы «${p.title}»`}
-                    className="aspect-[4/3] w-full bg-secondary object-cover"
-                  />
-                  <div className="space-y-1.5 p-2">
-                    <h4 className="truncate text-sm font-medium">{p.title}</h4>
-                    <p className="text-[11px] text-muted-foreground">{formatStamp(p.updatedAt)}</p>
-                    <Button
-                      size="sm"
-                      className="h-8 w-full gap-1.5"
-                      onClick={() => {
-                        onOpenProject(p);
-                        onOpenChange(false);
-                      }}
-                    >
-                      <FolderOpen className="h-4 w-4" /> Открыть
-                    </Button>
-                  </div>
-                </article>
-              ))}
-            </div>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

components/studio/ProjectsDialog.tsx

@@ -1,159 +0,0 @@
-import { useEffect, useState } from "react";
-import { Download, FolderOpen, Pencil, Trash2, Upload } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import {
-  formatStamp,
-  listProjects,
-  removeProject,
-  renameProject,
-  type StoredProject,
-} from "@/lib/studio-storage";
-
-type Props = {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-  onOpenProject: (p: StoredProject) => void;
-  onImportFile: () => void;
-  onSaveCurrent: () => void;
-  ownerId: string;
-};
-
-export default function ProjectsDialog({ open, onOpenChange, onOpenProject, onImportFile, onSaveCurrent, ownerId }: Props) {
-  const [items, setItems] = useState<StoredProject[]>([]);
-  const [toDelete, setToDelete] = useState<StoredProject | null>(null);
-
-  useEffect(() => {
-    if (open) setItems(listProjects(ownerId));
-  }, [open, ownerId]);
-
-  const download = (p: StoredProject) => {
-    const blob = new Blob([JSON.stringify(p.data, null, 2)], { type: "application/json" });
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = `${p.title || "proekt"}.json`;
-    a.click();
-    URL.revokeObjectURL(a.href);
-  };
-
-  const rename = (p: StoredProject) => {
-    const title = window.prompt("Новое название проекта", p.title);
-    if (title && title.trim()) setItems(renameProject(p.id, title.trim(), ownerId));
-  };
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-h-[85vh] max-w-4xl overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="font-display text-2xl">Мои проекты</DialogTitle>
-            <DialogDescription>Схемы, сохранённые в памяти этого браузера.</DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-wrap gap-2">
-            <Button size="lg" className="h-12 gap-2" onClick={onSaveCurrent} title="Сохранить текущую схему в проекты">
-              <FolderOpen className="h-5 w-5" /> Сохранить текущую схему
-            </Button>
-            <Button
-              variant="outline"
-              size="lg"
-              className="h-12 gap-2"
-              onClick={onImportFile}
-              title="Загрузить проект из файла .json"
-            >
-              <Upload className="h-5 w-5" /> Загрузить .json
-            </Button>
-          </div>
-
-          {items.length === 0 ? (
-            <p className="py-8 text-center text-sm text-muted-foreground">
-              Пока нет сохранённых проектов. Создайте схему и нажмите «Сохранить текущую схему».
-            </p>
-          ) : (
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {items.map((p) => (
-                <article key={p.id} className="overflow-hidden rounded-2xl border border-border bg-card">
-                  <img
-                    src={p.thumb}
-                    alt={`Превью схемы «${p.title}»`}
-                    className="aspect-[4/3] w-full bg-secondary object-cover"
-                  />
-                  <div className="space-y-2 p-3">
-                    <h3 className="truncate font-medium">{p.title}</h3>
-                    <p className="text-xs text-muted-foreground">
-                      {formatStamp(p.updatedAt)} · элементов: {p.elements}
-                    </p>
-                    <div className="grid grid-cols-2 gap-2">
-                      <Button size="sm" className="h-10 gap-1" onClick={() => onOpenProject(p)} title="Открыть проект">
-                        <FolderOpen className="h-4 w-4" /> Открыть
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-10 gap-1"
-                        onClick={() => rename(p)}
-                        title="Переименовать проект"
-                      >
-                        <Pencil className="h-4 w-4" /> Переименовать
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-10 gap-1"
-                        onClick={() => download(p)}
-                        title="Скачать проект файлом .json"
-                      >
-                        <Download className="h-4 w-4" /> Скачать
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        className="h-10 gap-1"
-                        onClick={() => setToDelete(p)}
-                        title="Удалить проект"
-                      >
-                        <Trash2 className="h-4 w-4" /> Удалить
-                      </Button>
-                    </div>
-                  </div>
-                </article>
-              ))}
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
-      <AlertDialog open={!!toDelete} onOpenChange={(v) => !v && setToDelete(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Удалить проект?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Вы уверены, что хотите удалить проект «{toDelete?.title}»? Действие нельзя отменить.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Отмена</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (toDelete) setItems(removeProject(toDelete.id, ownerId));
-                setToDelete(null);
-              }}
-            >
-              Удалить
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}

components/studio/Shape.tsx

@@ -1,58 +0,0 @@
-import type { ElementKind } from "@/lib/tatting";
-
-type Props = {
-  kind: ElementKind;
-  picots: number;
-  radius: number;
-  color: string;
-};
-
-const r3 = (n: number) => Math.round(n * 1000) / 1000;
-
-/** Renders a tatting motif centered at (0,0) in local coordinates. */
-export function Shape({ kind, picots, radius, color }: Props) {
-  const picotR = Math.max(3, radius * 0.11);
-
-  if (kind === "ring") {
-    const dots = Array.from({ length: picots }, (_, i) => {
-      const a = (i / picots) * Math.PI * 2 - Math.PI / 2;
-      return {
-        cx: r3(Math.cos(a) * (radius + picotR * 0.7)),
-        cy: r3(Math.sin(a) * (radius + picotR * 0.7)),
-      };
-    });
-    return (
-      <g fill="none" stroke={color} strokeWidth={2.5} strokeLinecap="round">
-        <circle cx={0} cy={0} r={radius} />
-        <circle cx={0} cy={0} r={radius - 5} strokeWidth={1} opacity={0.45} />
-        {dots.map((d, i) => (
-          <circle key={i} cx={d.cx} cy={d.cy} r={picotR} />
-        ))}
-      </g>
-    );
-  }
-
-  // Arc: half-circle bow with picots along the outer edge
-  const start = { x: -radius, y: 0 };
-  const end = { x: radius, y: 0 };
-  const dots = Array.from({ length: picots }, (_, i) => {
-    const t = (i + 1) / (picots + 1);
-    const a = Math.PI - t * Math.PI;
-    const rr = radius + picotR * 0.7;
-    return { cx: r3(Math.cos(a) * rr), cy: r3(-Math.sin(a) * rr) };
-  });
-
-  return (
-    <g fill="none" stroke={color} strokeWidth={2.5} strokeLinecap="round">
-      <path d={`M ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y}`} />
-      <path
-        d={`M ${start.x + 5} 0 A ${radius - 5} ${radius - 5} 0 0 1 ${end.x - 5} 0`}
-        strokeWidth={1}
-        opacity={0.45}
-      />
-      {dots.map((d, i) => (
-        <circle key={i} cx={d.cx} cy={d.cy} r={picotR} />
-      ))}
-    </g>
-  );
-}

components/studio/TattingStudio.tsx

@@ -1,1198 +0,0 @@
-import * as fabric from "fabric";
-import { jsPDF } from "jspdf";
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  ArrowDownToLine,
-  ArrowUpToLine,
-  Cloud,
-  Copy,
-  Download,
-  Eraser,
-  FileDown,
-  FlipHorizontal,
-  FlipVertical,
-  FolderOpen,
-  Grid3x3,
-  Group,
-  HelpCircle,
-  Maximize,
-  MousePointer2,
-  Redo2,
-  RotateCw,
-  Ruler,
-  Save,
-  Scissors,
-  Trash2,
-  Undo2,
-  Ungroup,
-  ZoomIn,
-  ZoomOut,
-  LogOut,
-  Users,
-  UserRound,
-  MessageSquarePlus,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Slider } from "@/components/ui/slider";
-
-import {
-  CATEGORIES,
-  LIBRARY,
-  SNAP_STEPS,
-  SYMMETRY_AXES,
-  THREADS,
-  threadMeters,
-  type ElDef,
-  type ThreadColor,
-} from "@/lib/tatting-ru";
-import { applyThread, applyWidth, buildElement, CUSTOM_PROPS, type TattingObject } from "@/lib/fabric-elements";
-import { AUTOSAVE_KEY, newId, upsertProject, type StoredProject } from "@/lib/studio-storage";
-import { currentUser, logout, roleLabel, type StoredUser } from "@/lib/auth-service";
-import LoginDialog from "@/components/studio/LoginDialog";
-import AdminPanel from "@/components/studio/AdminPanel";
-import ProjectsDialog from "@/components/studio/ProjectsDialog";
-import ProfileDialog from "@/components/studio/ProfileDialog";
-import FeedbackDialog from "@/components/studio/FeedbackDialog";
-
-const W = 1200;
-const H = 850;
-
-type Theme = "light" | "dark" | "grid";
-
-const THEME_CFG: Record<Theme, { bg: string; line: string; bold: string; label: string; hint: string }> = {
-  light: { bg: "#fdfaf3", line: "#e6dfd0", bold: "#d6cbb4", label: "Светлая", hint: "Светлая тема" },
-  dark: { bg: "#14161b", line: "#2a2f3a", bold: "#3f4757", label: "Тёмная", hint: "Тёмная тема с контрастной сеткой" },
-  grid: { bg: "#eef5fb", line: "#c3d9ee", bold: "#8fb6dc", label: "Миллиметровка", hint: "Чертёжная миллиметровка" },
-};
-
-export default function TattingStudio() {
-  const elRef = useRef<HTMLCanvasElement | null>(null);
-  const wrapRef = useRef<HTMLDivElement | null>(null);
-  const fcRef = useRef<fabric.Canvas | null>(null);
-  const history = useRef<{ stack: string[]; index: number; lock: boolean }>({ stack: [], index: -1, lock: false });
-  const fileRef = useRef<HTMLInputElement | null>(null);
-  const pinch = useRef<{ dist: number; x: number; y: number } | null>(null);
-  const drag = useRef<{ x: number; y: number } | null>(null);
-  const savedTimer = useRef<number | null>(null);
-
-  const [unlocked, setUnlocked] = useState(true);
-  const [theme, setTheme] = useState<Theme>("light");
-  const [snap, setSnap] = useState(10);
-  const [showGrid, setShowGrid] = useState(true);
-  const [showRulers, setShowRulers] = useState(true);
-  const [zoom, setZoom] = useState(1);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const [panning, setPanning] = useState(false);
-  const [booting, setBooting] = useState(true);
-  const [symmetry, setSymmetry] = useState(1);
-  const [thread, setThread] = useState<ThreadColor>(THREADS[0]!);
-  const [width, setWidth] = useState(3);
-  const [selected, setSelected] = useState<{ name: string; knots: number; thread: string } | null>(null);
-  const [stats, setStats] = useState({ knots: 0, pathPx: 0, count: 0 });
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-  const [category, setCategory] = useState<string>(CATEGORIES[0]!);
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [projectsOpen, setProjectsOpen] = useState(false);
-  const [profileOpen, setProfileOpen] = useState(false);
-  const [feedbackOpen, setFeedbackOpen] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const [user, setUser] = useState<StoredUser | null>(null);
-  const [adminOpen, setAdminOpen] = useState(false);
-
-  useEffect(() => {
-    const session = currentUser();
-    setUser(session);
-    setUnlocked(!!session && !session.temporary);
-  }, []);
-
-  const drawGrid = useCallback((canvas: fabric.Canvas, step: number, th: Theme, visible: boolean) => {
-    const cfg = THEME_CFG[th];
-    canvas.backgroundColor = cfg.bg;
-    canvas.getObjects().forEach((o) => {
-      if ((o as TattingObject).isGrid) canvas.remove(o);
-    });
-    if (visible) {
-      const lines: fabric.FabricObject[] = [];
-      const mk = (coords: [number, number, number, number], bold: boolean) => {
-        const l = new fabric.Line(coords, {
-          stroke: bold ? cfg.bold : cfg.line,
-          strokeWidth: bold ? 1 : 0.5,
-          selectable: false,
-          evented: false,
-        }) as unknown as TattingObject;
-        l.isGrid = true;
-        lines.push(l as unknown as fabric.FabricObject);
-      };
-      for (let x = 0; x <= W; x += step) mk([x, 0, x, H], x % (step * 5) === 0);
-      for (let y = 0; y <= H; y += step) mk([0, y, W, y], y % (step * 5) === 0);
-      lines.forEach((l) => {
-        canvas.add(l);
-        canvas.sendObjectToBack(l);
-      });
-    }
-    canvas.requestRenderAll();
-  }, []);
-
-  const recalc = useCallback((canvas: fabric.Canvas) => {
-    const objs = canvas.getObjects().filter((o) => !(o as TattingObject).isGrid);
-    const knots = objs.reduce((s, o) => s + ((o as TattingObject).knots ?? 0), 0);
-    const pathPx = objs.reduce((s, o) => s + ((o as TattingObject).pathPx ?? 0) * (o.scaleX ?? 1), 0);
-    setStats({ knots, pathPx, count: objs.length });
-  }, []);
-
-  /** автосохранение текущей схемы в память браузера */
-  const persist = useCallback((canvas: fabric.Canvas) => {
-    try {
-      const data = canvas.toObject(CUSTOM_PROPS) as { objects: { isGrid?: boolean }[] };
-      data.objects = data.objects.filter((o) => !o.isGrid);
-      localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(data));
-      setSaved(true);
-      if (savedTimer.current) window.clearTimeout(savedTimer.current);
-      savedTimer.current = window.setTimeout(() => setSaved(false), 1400);
-    } catch {
-      /* приватный режим — просто пропускаем */
-    }
-  }, []);
-
-  const snapshot = useCallback(
-    (canvas: fabric.Canvas) => {
-      if (history.current.lock) return;
-      const json = JSON.stringify(canvas.toObject(CUSTOM_PROPS));
-      const h = history.current;
-      h.stack = h.stack.slice(0, h.index + 1);
-      h.stack.push(json);
-      if (h.stack.length > 40) h.stack.shift();
-      h.index = h.stack.length - 1;
-      setCanUndo(h.index > 0);
-      setCanRedo(false);
-      recalc(canvas);
-      persist(canvas);
-    },
-    [recalc, persist],
-  );
-
-  // init
-  useEffect(() => {
-    if (!unlocked || !elRef.current) return;
-    const canvas = new fabric.Canvas(elRef.current, {
-      width: W,
-      height: H,
-      backgroundColor: THEME_CFG.light.bg,
-      preserveObjectStacking: true,
-    });
-    fcRef.current = canvas;
-    drawGrid(canvas, 10, "light", true);
-
-    const onSelect = () => {
-      const a = canvas.getActiveObject() as TattingObject | undefined;
-      setSelected(
-        a && a.elName
-          ? { name: a.elName, knots: a.knots ?? 0, thread: a.threadName ?? "—" }
-          : a
-            ? { name: "Несколько элементов", knots: 0, thread: "—" }
-            : null,
-      );
-    };
-    canvas.on("selection:created", onSelect);
-    canvas.on("selection:updated", onSelect);
-    canvas.on("selection:cleared", () => setSelected(null));
-    canvas.on("object:added", () => snapshot(canvas));
-    canvas.on("object:modified", () => snapshot(canvas));
-    canvas.on("object:removed", () => snapshot(canvas));
-
-    const stored = typeof localStorage !== "undefined" ? localStorage.getItem(AUTOSAVE_KEY) : null;
-    if (stored) {
-      history.current.lock = true;
-      void canvas
-        .loadFromJSON(stored)
-        .then(() => {
-          drawGrid(canvas, 10, "light", true);
-          canvas.requestRenderAll();
-          history.current.lock = false;
-          snapshot(canvas);
-        })
-        .catch(() => {
-          history.current.lock = false;
-        })
-        .finally(() => window.setTimeout(() => setBooting(false), 220));
-    } else {
-      window.setTimeout(() => setBooting(false), 220);
-    }
-
-
-    return () => {
-      void canvas.dispose();
-      fcRef.current = null;
-    };
-  }, [unlocked, drawGrid, snapshot]);
-
-  // привязка к сетке
-  useEffect(() => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    const handler = (e: { target: fabric.FabricObject }) => {
-      const t = e.target;
-      t.set({ left: Math.round(t.left / snap) * snap, top: Math.round(t.top / snap) * snap });
-    };
-    canvas.on("object:moving", handler as never);
-    return () => canvas.off("object:moving", handler as never);
-  }, [snap]);
-
-  // тема / шаг сетки
-  useEffect(() => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    history.current.lock = true;
-    drawGrid(canvas, snap, theme, showGrid);
-    history.current.lock = false;
-    document.documentElement.classList.toggle("dark", theme === "dark");
-  }, [theme, snap, showGrid, drawGrid]);
-
-  /** не даём уехать схеме за пределы окна: сцена всегда перекрывает вид */
-  const clampVpt = useCallback((canvas: fabric.Canvas) => {
-    const z = canvas.getZoom();
-    const vpt = canvas.viewportTransform;
-    const limX = Math.max(0, W * z - W);
-    const limY = Math.max(0, H * z - H);
-    vpt[4] = Math.min(W * 0.25, Math.max(-limX - W * 0.25, vpt[4]));
-    vpt[5] = Math.min(H * 0.25, Math.max(-limY - H * 0.25, vpt[5]));
-    canvas.setViewportTransform(vpt);
-    setZoom(z);
-    setPan({ x: vpt[4], y: vpt[5] });
-  }, []);
-
-  const applyZoom = useCallback(
-    (next: number, px?: number, py?: number) => {
-      const canvas = fcRef.current;
-      if (!canvas) return;
-      const z = Math.min(6, Math.max(0.3, next));
-      canvas.zoomToPoint(new fabric.Point(px ?? W / 2, py ?? H / 2), z);
-      clampVpt(canvas);
-      canvas.requestRenderAll();
-    },
-    [clampVpt],
-  );
-
-  const panBy = useCallback(
-    (dx: number, dy: number) => {
-      const canvas = fcRef.current;
-      if (!canvas) return;
-      const vpt = canvas.viewportTransform;
-      vpt[4] += dx;
-      vpt[5] += dy;
-      clampVpt(canvas);
-      canvas.requestRenderAll();
-    },
-    [clampVpt],
-  );
-
-  const fitToScreen = useCallback(() => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-    canvas.requestRenderAll();
-  }, []);
-
-  // колесо мыши, панорама правой кнопкой и жесты касания
-  useEffect(() => {
-    const wrap = wrapRef.current;
-    if (!wrap || !unlocked) return;
-    const scale = () => {
-      const r = wrap.getBoundingClientRect();
-      return { kx: W / (r.width || 1), ky: H / (r.height || 1), r };
-    };
-    const toScene = (cx: number, cy: number) => {
-      const { kx, ky, r } = scale();
-      return { x: (cx - r.left) * kx, y: (cy - r.top) * ky };
-    };
-
-    const onWheel = (e: WheelEvent) => {
-      const canvas = fcRef.current;
-      if (!canvas) return;
-      e.preventDefault();
-      const dy = e.deltaY * (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 100 : 1);
-      const p = toScene(e.clientX, e.clientY);
-      applyZoom(canvas.getZoom() * Math.exp(-dy * 0.0015), p.x, p.y);
-    };
-
-    // правая кнопка мыши — перетаскивание холста
-    const onDown = (e: PointerEvent) => {
-      if (e.button !== 2 && e.button !== 1) return;
-      e.preventDefault();
-      e.stopPropagation();
-      drag.current = { x: e.clientX, y: e.clientY };
-      setPanning(true);
-      wrap.setPointerCapture(e.pointerId);
-    };
-    const onPointerMove = (e: PointerEvent) => {
-      if (!drag.current) return;
-      e.preventDefault();
-      const { kx, ky } = scale();
-      panBy((e.clientX - drag.current.x) * kx, (e.clientY - drag.current.y) * ky);
-      drag.current = { x: e.clientX, y: e.clientY };
-    };
-    const onUp = () => {
-      drag.current = null;
-      setPanning(false);
-    };
-    const onContext = (e: MouseEvent) => e.preventDefault();
-
-    const dist = (t: TouchList) => Math.hypot(t[0]!.clientX - t[1]!.clientX, t[0]!.clientY - t[1]!.clientY);
-    const mid = (t: TouchList) => ({
-      x: (t[0]!.clientX + t[1]!.clientX) / 2,
-      y: (t[0]!.clientY + t[1]!.clientY) / 2,
-    });
-    const onStart = (e: TouchEvent) => {
-      if (e.touches.length === 2) {
-        const m = mid(e.touches);
-        const c = toScene(m.x, m.y);
-        pinch.current = { dist: dist(e.touches), x: c.x, y: c.y };
-        drag.current = { x: m.x, y: m.y };
-      }
-    };
-    const onTouchMove = (e: TouchEvent) => {
-      const canvas = fcRef.current;
-      if (!canvas || e.touches.length !== 2 || !pinch.current || !drag.current) return;
-      e.preventDefault();
-      const d = dist(e.touches);
-      const m = mid(e.touches);
-      const c = toScene(m.x, m.y);
-      const { kx, ky } = scale();
-      applyZoom(canvas.getZoom() * (d / pinch.current.dist), c.x, c.y);
-      panBy((m.x - drag.current.x) * kx, (m.y - drag.current.y) * ky);
-      pinch.current = { dist: d, x: c.x, y: c.y };
-      drag.current = { x: m.x, y: m.y };
-    };
-    const onEnd = () => {
-      pinch.current = null;
-      drag.current = null;
-    };
-
-    wrap.addEventListener("wheel", onWheel, { passive: false });
-    wrap.addEventListener("pointerdown", onDown, true);
-    wrap.addEventListener("pointermove", onPointerMove, true);
-    wrap.addEventListener("pointerup", onUp, true);
-    wrap.addEventListener("pointercancel", onUp, true);
-    wrap.addEventListener("contextmenu", onContext);
-    wrap.addEventListener("touchstart", onStart, { passive: false });
-    wrap.addEventListener("touchmove", onTouchMove, { passive: false });
-    wrap.addEventListener("touchend", onEnd);
-    return () => {
-      wrap.removeEventListener("wheel", onWheel);
-      wrap.removeEventListener("pointerdown", onDown, true);
-      wrap.removeEventListener("pointermove", onPointerMove, true);
-      wrap.removeEventListener("pointerup", onUp, true);
-      wrap.removeEventListener("pointercancel", onUp, true);
-      wrap.removeEventListener("contextmenu", onContext);
-      wrap.removeEventListener("touchstart", onStart);
-      wrap.removeEventListener("touchmove", onTouchMove);
-      wrap.removeEventListener("touchend", onEnd);
-    };
-  }, [unlocked, applyZoom, panBy]);
-
-
-  const addElement = (def: ElDef) => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    const cx = W / 2;
-    const cy = H / 2;
-    const axes = def.kind === "text" ? 1 : symmetry;
-    if (axes <= 1) {
-      const obj = buildElement(def, thread, width);
-      obj.set({ left: cx, top: cy });
-      canvas.add(obj);
-      canvas.setActiveObject(obj);
-    } else {
-      const dist = 160;
-      for (let i = 0; i < axes; i++) {
-        const a = (i / axes) * Math.PI * 2;
-        const obj = buildElement(def, thread, width);
-        obj.set({
-          left: Math.round((cx + Math.cos(a) * dist) / snap) * snap,
-          top: Math.round((cy + Math.sin(a) * dist) / snap) * snap,
-          angle: (a * 180) / Math.PI + 90,
-        });
-        canvas.add(obj);
-      }
-    }
-    canvas.requestRenderAll();
-  };
-
-  const withActive = (fn: (obj: TattingObject, canvas: fabric.Canvas) => void) => {
-    const canvas = fcRef.current;
-    const a = canvas?.getActiveObject() as TattingObject | undefined;
-    if (!canvas || !a) return;
-    fn(a, canvas);
-    canvas.requestRenderAll();
-  };
-
-  const duplicate = () =>
-    withActive(async (a, canvas) => {
-      const clone = (await a.clone(CUSTOM_PROPS as never)) as TattingObject;
-      clone.set({ left: a.left + snap * 3, top: a.top + snap * 3 });
-      canvas.add(clone);
-      canvas.setActiveObject(clone);
-      canvas.requestRenderAll();
-    });
-
-  const groupSelected = () => {
-    const canvas = fcRef.current;
-    const a = canvas?.getActiveObject();
-    if (!canvas || !a || a.type !== "activeselection") return;
-    const sel = a as fabric.ActiveSelection;
-    const g = new fabric.Group(sel.removeAll()) as TattingObject;
-    g.elName = "Группа элементов";
-    g.knots = 0;
-    canvas.add(g);
-    canvas.setActiveObject(g);
-    canvas.requestRenderAll();
-    snapshot(canvas);
-  };
-
-  const ungroupSelected = () => {
-    const canvas = fcRef.current;
-    const a = canvas?.getActiveObject() as fabric.Group | undefined;
-    if (!canvas || !a || a.type !== "group") return;
-    const items = a.removeAll();
-    canvas.remove(a);
-    items.forEach((o) => canvas.add(o));
-    canvas.discardActiveObject();
-    canvas.requestRenderAll();
-    snapshot(canvas);
-  };
-
-  const restore = (dir: -1 | 1) => {
-    const canvas = fcRef.current;
-    const h = history.current;
-    const next = h.index + dir;
-    if (!canvas || next < 0 || next >= h.stack.length) return;
-    h.index = next;
-    h.lock = true;
-    void canvas.loadFromJSON(h.stack[next]!).then(() => {
-      drawGrid(canvas, snap, theme, showGrid);
-      canvas.requestRenderAll();
-      h.lock = false;
-      setCanUndo(h.index > 0);
-      setCanRedo(h.index < h.stack.length - 1);
-      recalc(canvas);
-    });
-  };
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (!(e.ctrlKey || e.metaKey)) return;
-      if (e.key.toLowerCase() === "z") {
-        e.preventDefault();
-        restore(e.shiftKey ? 1 : -1);
-      }
-      if (e.key.toLowerCase() === "y") {
-        e.preventDefault();
-        restore(1);
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  });
-
-  const exportPng = () => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    const url = canvas.toDataURL({ format: "png", multiplier: 3 });
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "frivolite-uzor.png";
-    a.click();
-  };
-
-  const exportPdf = () => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    const url = canvas.toDataURL({ format: "png", multiplier: 3 });
-    const pdf = new jsPDF({ orientation: "landscape", unit: "mm", format: "a4" });
-    const ratio = Math.min((297 - 20) / W, (210 - 24) / H);
-    pdf.setFontSize(12);
-    pdf.text("Shema frivolite / RealKnot Studio", 10, 12);
-    pdf.addImage(url, "PNG", 10, 16, W * ratio, H * ratio);
-    pdf.save("frivolite-uzor.pdf");
-  };
-
-  const currentData = () => {
-    const canvas = fcRef.current;
-    if (!canvas) return null;
-    const data = canvas.toObject(CUSTOM_PROPS) as { objects: { isGrid?: boolean }[] };
-    data.objects = data.objects.filter((o) => !o.isGrid);
-    return data;
-  };
-
-  const saveProjectFile = () => {
-    const data = currentData();
-    if (!data) return;
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = "frivolite-proekt.json";
-    a.click();
-    URL.revokeObjectURL(a.href);
-  };
-
-  const saveToGallery = () => {
-    const canvas = fcRef.current;
-    const data = currentData();
-    if (!canvas || !data) return;
-    const title = window.prompt("Название проекта", `Схема ${new Date().toLocaleDateString("ru-RU")}`);
-    if (!title) return;
-    if (!user) return;
-    const project: StoredProject = {
-      id: newId(),
-      ownerId: user.id,
-      title: title.trim(),
-      updatedAt: Date.now(),
-      elements: stats.count,
-      thumb: canvas.toDataURL({ format: "png", multiplier: 0.25 }),
-      data,
-    };
-    upsertProject(project);
-    setProjectsOpen(false);
-    window.setTimeout(() => setProjectsOpen(true), 120);
-  };
-
-  const loadData = (payload: string | object) => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    history.current.lock = true;
-    void canvas.loadFromJSON(payload as never).then(() => {
-      drawGrid(canvas, snap, theme, showGrid);
-      canvas.requestRenderAll();
-      history.current.lock = false;
-      snapshot(canvas);
-    });
-  };
-
-  const openFile = (file: File) => void file.text().then((t) => loadData(t));
-
-  const deleteSelected = () =>
-    withActive((_a, c) => {
-      c.getActiveObjects().forEach((o) => c.remove(o));
-      c.discardActiveObject();
-      c.requestRenderAll();
-    });
-
-  const clearCanvas = () => {
-    const canvas = fcRef.current;
-    if (!canvas) return;
-    if (!window.confirm("Очистить холст? Все элементы схемы будут удалены.")) return;
-    canvas.discardActiveObject();
-    canvas
-      .getObjects()
-      .filter((o) => !(o as TattingObject).isGrid)
-      .forEach((o) => canvas.remove(o));
-    canvas.requestRenderAll();
-    snapshot(canvas);
-  };
-
-  const meters = threadMeters(stats.pathPx);
-
-  if (!unlocked || !user)
-    return (
-      <LoginDialog
-        onSignedIn={(signed) => {
-          setUser(signed);
-          setUnlocked(true);
-        }}
-      />
-    );
-
-  return (
-    <div className="flex h-[100dvh] flex-col overflow-hidden bg-background font-sans text-foreground">
-      <input
-        ref={fileRef}
-        type="file"
-        accept="application/json"
-        className="hidden"
-        onChange={(e) => {
-          const f = e.target.files?.[0];
-          if (f) openFile(f);
-          e.target.value = "";
-        }}
-      />
-
-      <header className="flex shrink-0 items-center gap-2 border-b border-border bg-card px-3 py-2">
-        <div className="min-w-0 flex-1">
-          <h1 className="truncate font-display text-xl leading-none lg:text-2xl">RealKnot Studio</h1>
-          <p className="truncate text-[11px] text-muted-foreground">
-            Редактор схем плетения · сетка {snap} px · правая кнопка — перемещение, колесо — масштаб
-          </p>
-        </div>
-
-        <div className="hidden rounded-lg border border-border p-0.5 md:flex">
-          {(Object.keys(THEME_CFG) as Theme[]).map((t) => (
-            <button
-              key={t}
-              onClick={() => setTheme(t)}
-              title={THEME_CFG[t].hint}
-              className={`h-8 rounded-md px-2 text-xs font-medium transition-colors ${
-                theme === t ? "bg-primary text-primary-foreground" : "text-muted-foreground"
-              }`}
-            >
-              {THEME_CFG[t].label}
-            </button>
-          ))}
-        </div>
-
-        <button
-          onClick={() => setProfileOpen(true)}
-          title={`Профиль: ${user.username} · ${roleLabel(user.role)}`}
-          className="hidden h-9 items-center gap-2 rounded-lg border border-border bg-secondary px-2.5 text-xs font-medium transition-colors hover:border-accent lg:flex"
-        >
-          {user.avatar ? (
-            <img src={user.avatar} alt="" className="h-6 w-6 rounded-full object-cover" />
-          ) : (
-            <UserRound className="h-4 w-4 text-accent" />
-          )}
-          {user.displayName?.trim() || user.username}
-        </button>
-
-        <div className="flex items-center gap-1">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-9 w-9 lg:hidden"
-            title="Профиль и мои работы"
-            onClick={() => setProfileOpen(true)}
-          >
-            <UserRound className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-9 w-9"
-            title="Написать: чего не хватает"
-            onClick={() => setFeedbackOpen(true)}
-          >
-            <MessageSquarePlus className="h-4 w-4" />
-          </Button>
-          {user.role === "admin" && (
-            <Button
-              variant="outline"
-              size="icon"
-              className="h-9 w-9"
-              title="Панель админа: пользователи и пожелания"
-              onClick={() => setAdminOpen(true)}
-            >
-              <Users className="h-4 w-4" />
-            </Button>
-          )}
-          <Button variant="outline" size="icon" className="h-9 w-9" title="Помощь" onClick={() => setHelpOpen(true)}>
-            <HelpCircle className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-9 w-9"
-            title="Мои проекты"
-            onClick={() => setProjectsOpen(true)}
-          >
-            <FolderOpen className="h-4 w-4" />
-          </Button>
-          <Button variant="outline" size="icon" className="h-9 w-9" title="Скачать .json" onClick={saveProjectFile}>
-            <Save className="h-4 w-4" />
-          </Button>
-          <Button variant="outline" size="icon" className="h-9 w-9" title="Экспорт в PDF A4" onClick={exportPdf}>
-            <FileDown className="h-4 w-4" />
-          </Button>
-          <Button size="sm" className="h-9 gap-1.5" title="Экспорт изображения PNG" onClick={exportPng}>
-            <Download className="h-4 w-4" /> PNG
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-9 w-9"
-            title="Выйти из аккаунта"
-            onClick={() => {
-              logout();
-              setUser(null);
-              setUnlocked(false);
-            }}
-          >
-            <LogOut className="h-4 w-4" />
-          </Button>
-        </div>
-      </header>
-
-      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-2 lg:flex-row lg:overflow-hidden lg:gap-3 lg:p-3">
-        {/* Библиотека */}
-        <aside className="w-full shrink-0 overflow-y-auto rounded-xl border border-border bg-card p-3 lg:w-56 xl:w-64">
-          <h2 className="font-display text-base">Библиотека элементов</h2>
-
-          <div className="mt-2 flex flex-wrap gap-1">
-            {CATEGORIES.map((c) => (
-              <button
-                key={c}
-                onClick={() => setCategory(c)}
-                title={`Раздел «${c}»`}
-                className={`h-8 rounded-md border px-2 text-xs font-medium transition-colors ${
-                  category === c ? "border-accent bg-secondary" : "border-border text-muted-foreground"
-                }`}
-              >
-                {c}
-              </button>
-            ))}
-          </div>
-          <div className="mt-2 grid grid-cols-2 gap-1.5 lg:grid-cols-1">
-            {LIBRARY.filter((e) => e.category === category).map((def) => (
-              <button
-                key={def.id}
-                onClick={() => addElement(def)}
-                title={`Добавить: ${def.name} · ${def.kind === "text" ? "подпись" : `${def.knots} узлов`}`}
-                className="flex w-full items-center gap-2 rounded-lg border border-border bg-background p-1.5 text-left transition-colors hover:border-accent hover:bg-secondary active:scale-[0.98]"
-              >
-                <ElementIcon def={def} color={thread.value} />
-                <span className="min-w-0">
-                  <span className="block truncate text-xs font-medium">{def.name}</span>
-                  <span className="block text-[10px] text-muted-foreground">
-                    {def.kind === "text" ? "подпись" : `${def.knots} узлов`}
-                  </span>
-                </span>
-              </button>
-            ))}
-          </div>
-        </aside>
-
-        {/* Холст */}
-        <main className="flex min-h-0 min-w-0 flex-1 flex-col">
-
-          <div className="flex shrink-0 flex-wrap items-center gap-1 rounded-xl border border-border bg-card p-1.5">
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Отменить (Ctrl+Z)" disabled={!canUndo} onClick={() => restore(-1)}>
-              <Undo2 className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Повторить (Ctrl+Shift+Z)" disabled={!canRedo} onClick={() => restore(1)}>
-              <Redo2 className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Дублировать выбранный элемент" onClick={duplicate}>
-              <Copy className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Сгруппировать выделенные элементы" onClick={groupSelected}>
-              <Group className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Разгруппировать элементы" onClick={ungroupSelected}>
-              <Ungroup className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="h-9 w-9"
-              title="Отразить по горизонтали"
-              onClick={() => withActive((a) => a.set("flipX", !a.flipX))}
-            >
-              <FlipHorizontal className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="h-9 w-9"
-              title="Отразить по вертикали"
-              onClick={() => withActive((a) => a.set("flipY", !a.flipY))}
-            >
-              <FlipVertical className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="h-9 w-9"
-              title="На передний план"
-              onClick={() => withActive((a, c) => c.bringObjectToFront(a))}
-            >
-              <ArrowUpToLine className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon"
-              className="h-9 w-9"
-              title="На задний план"
-              onClick={() =>
-                withActive((a, c) => {
-                  c.sendObjectToBack(a);
-                  c.getObjects()
-                    .filter((o) => (o as TattingObject).isGrid)
-                    .forEach((g) => c.sendObjectToBack(g));
-                })
-              }
-            >
-              <ArrowDownToLine className="h-4 w-4" />
-            </Button>
-
-            <span className="mx-1 hidden h-6 w-px bg-border sm:block" />
-
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Приблизить" onClick={() => applyZoom(zoom * 1.2)}>
-              <ZoomIn className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="icon" className="h-9 w-9" title="Отдалить" onClick={() => applyZoom(zoom / 1.2)}>
-              <ZoomOut className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="sm" className="h-9 gap-1.5" title="Вписать схему в экран" onClick={fitToScreen}>
-              <Maximize className="h-4 w-4" />
-              <span className="tabular-nums">{Math.round(zoom * 100)}%</span>
-            </Button>
-            <Button
-              variant={showGrid ? "default" : "outline"}
-              size="icon"
-              className="h-9 w-9"
-              title="Показать или скрыть сетку"
-              onClick={() => setShowGrid((v) => !v)}
-            >
-              <Grid3x3 className="h-4 w-4" />
-            </Button>
-            <Button
-              variant={showRulers ? "default" : "outline"}
-              size="icon"
-              className="h-9 w-9"
-              title="Показать или скрыть линейки"
-              onClick={() => setShowRulers((v) => !v)}
-            >
-              <Ruler className="h-4 w-4" />
-            </Button>
-          </div>
-
-          <div className="tatting-frame relative mt-2 min-h-0 flex-1 rounded-xl border border-border bg-card p-1.5 shadow-sm">
-            <div className={`tatting-box ${showRulers ? "with-rulers" : ""}`}>
-              {showRulers && <RulerBar axis="x" zoom={zoom} pan={pan.x} />}
-              <div className="flex min-h-0 min-w-0 gap-1">
-                {showRulers && <RulerBar axis="y" zoom={zoom} pan={pan.y} />}
-                <div
-                  ref={wrapRef}
-                  className={`tatting-wrap relative min-w-0 flex-1 overflow-hidden rounded-lg ${
-                    panning ? "cursor-grabbing" : ""
-                  }`}
-                >
-                  <canvas ref={elRef} className="touch-none" />
-                  {booting && (
-                    <div className="absolute inset-0 animate-pulse backdrop-blur-md">
-                      <div className="h-full w-full bg-gradient-to-br from-secondary/70 via-card/60 to-secondary/70" />
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* мягкий индикатор автосохранения в углу */}
-            <div
-              aria-live="polite"
-              className={`pointer-events-none absolute bottom-3 right-3 flex items-center gap-1.5 rounded-full border border-border bg-card/90 px-2.5 py-1 text-[11px] text-muted-foreground shadow-sm transition-all duration-300 ${
-                saved ? "translate-y-0 opacity-100" : "translate-y-1 opacity-0"
-              }`}
-            >
-              <Cloud className="h-3.5 w-3.5 animate-pulse text-accent" /> сохранено
-            </div>
-          </div>
-
-
-
-        </main>
-
-        {/* Свойства */}
-        <aside className="w-full shrink-0 space-y-3 overflow-y-auto rounded-xl border border-border bg-card p-3 lg:w-60 xl:w-72">
-          <div>
-            <h2 className="font-display text-base">Сетка и симметрия</h2>
-            <div className="mt-1 text-xs text-muted-foreground">Шаг привязки</div>
-            <div className="mt-1 flex gap-1">
-              {SNAP_STEPS.map((s) => (
-                <button
-                  key={s}
-                  onClick={() => setSnap(s)}
-                  title={`Привязка к сетке ${s} px`}
-                  className={`h-8 flex-1 rounded-lg border text-xs font-medium ${
-                    snap === s ? "border-accent bg-secondary" : "border-border text-muted-foreground"
-                  }`}
-                >
-                  {s} px
-                </button>
-              ))}
-            </div>
-            <div className="mt-2 text-xs text-muted-foreground">Круговая симметрия (осей)</div>
-            <div className="mt-1 flex gap-1">
-              {SYMMETRY_AXES.map((s) => (
-                <button
-                  key={s}
-                  onClick={() => setSymmetry(s)}
-                  title={s === 1 ? "Без симметрии" : `Радиальная симметрия: ${s} осей`}
-                  className={`h-8 flex-1 rounded-lg border text-xs font-medium ${
-                    symmetry === s ? "border-accent bg-secondary" : "border-border text-muted-foreground"
-                  }`}
-                >
-                  {s === 1 ? "нет" : s}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="border-t border-border pt-3">
-            <h2 className="font-display text-base">Нити и цвет</h2>
-            {(["Металлик", "Пастель", "Градиент"] as const).map((g) => (
-              <div key={g} className="mt-2">
-                <div className="text-[10px] uppercase tracking-wide text-muted-foreground">{g}</div>
-                <div className="mt-1 flex flex-wrap gap-1.5">
-                  {THREADS.filter((t) => t.group === g).map((t) => (
-                    <button
-                      key={t.name}
-                      title={`Нить: ${t.name}`}
-                      aria-label={t.name}
-                      onClick={() => {
-                        setThread(t);
-                        withActive((a) => applyThread(a, t));
-                        setSelected((s) => (s ? { ...s, thread: t.name } : s));
-                      }}
-                      style={{ background: t.to ? `linear-gradient(135deg, ${t.value}, ${t.to})` : t.value }}
-                      className={`h-8 w-8 rounded-full border-2 transition-transform active:scale-90 ${
-                        thread.name === t.name ? "scale-110 border-accent" : "border-border"
-                      }`}
-                    />
-                  ))}
-                </div>
-              </div>
-            ))}
-            <div className="mt-3">
-              <div className="mb-1.5 flex items-center justify-between text-xs">
-                <span className="flex items-center gap-1.5">
-                  <Scissors className="h-3.5 w-3.5" /> Толщина нити
-                </span>
-                <span className="tabular-nums text-muted-foreground">{width.toFixed(1)}</span>
-              </div>
-              <Slider
-                value={[width]}
-                min={1}
-                max={10}
-                step={0.5}
-                onValueChange={([v]) => {
-                  const nv = v ?? 3;
-                  setWidth(nv);
-                  withActive((a) => applyWidth(a, nv));
-                }}
-              />
-            </div>
-          </div>
-
-          <div className="border-t border-border pt-3">
-            <h2 className="font-display text-base">Выбранный элемент</h2>
-            {selected ? (
-              <dl className="mt-1.5 space-y-1 text-xs">
-                <div className="flex justify-between gap-2">
-                  <dt className="text-muted-foreground">Название</dt>
-                  <dd className="text-right font-medium">{selected.name}</dd>
-                </div>
-                <div className="flex justify-between gap-2">
-                  <dt className="text-muted-foreground">Узлов</dt>
-                  <dd className="font-medium tabular-nums">{selected.knots}</dd>
-                </div>
-                <div className="flex justify-between gap-2">
-                  <dt className="text-muted-foreground">Нить</dt>
-                  <dd className="font-medium">{selected.thread}</dd>
-                </div>
-              </dl>
-            ) : (
-              <p className="mt-1.5 text-xs text-muted-foreground">
-                Выберите элемент на холсте, чтобы изменить цвет, толщину и положение.
-              </p>
-            )}
-            <Button
-              variant="destructive"
-              size="sm"
-              className="mt-2 h-9 w-full gap-2"
-              title="Удалить выбранный элемент"
-              disabled={!selected}
-              onClick={deleteSelected}
-            >
-              <Trash2 className="h-4 w-4" /> Удалить элемент
-            </Button>
-          </div>
-        </aside>
-      </div>
-
-      {/* Нижняя строка состояния */}
-      <footer className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-t border-border bg-card px-3 py-1.5">
-        <p className="text-xs tabular-nums">
-          Узлов: <strong>{stats.knots}</strong> · расход <strong>≈ {meters.toFixed(2)} м</strong>{" "}
-          <span className="text-muted-foreground">(запас 15%)</span>
-        </p>
-
-        <div className="flex items-center gap-2">
-          <Button
-            variant="destructive"
-            size="sm"
-            className="h-10 gap-2"
-            title="Удалить выбранный элемент"
-            disabled={!selected}
-            onClick={deleteSelected}
-          >
-            <Trash2 className="h-4 w-4" /> Удалить
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-10 gap-2 border-destructive/40 text-destructive"
-            title="Очистить холст полностью"
-            onClick={clearCanvas}
-          >
-            <Eraser className="h-4 w-4" /> Очистить холст
-          </Button>
-        </div>
-      </footer>
-
-      <ProjectsDialog
-        open={projectsOpen}
-        onOpenChange={setProjectsOpen}
-        onOpenProject={(p) => {
-          loadData(p.data as object);
-          setProjectsOpen(false);
-        }}
-        onImportFile={() => fileRef.current?.click()}
-        onSaveCurrent={saveToGallery}
-        ownerId={user.id}
-      />
-
-      <AdminPanel open={adminOpen} onOpenChange={setAdminOpen} />
-
-      <ProfileDialog
-        open={profileOpen}
-        onOpenChange={setProfileOpen}
-        user={user}
-        onUserChange={setUser}
-        onOpenProject={(p) => {
-          loadData(p.data as object);
-          setProfileOpen(false);
-        }}
-      />
-
-      <FeedbackDialog open={feedbackOpen} onOpenChange={setFeedbackOpen} user={user} />
-
-      <Dialog open={helpOpen} onOpenChange={setHelpOpen}>
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle className="font-display text-2xl">Как пользоваться студией</DialogTitle>
-            <DialogDescription>Три коротких шага для создания схемы фриволите.</DialogDescription>
-          </DialogHeader>
-          <ol className="space-y-4 text-sm">
-            <li className="flex gap-3">
-              <MousePointer2 className="mt-0.5 h-6 w-6 shrink-0 text-primary" />
-              <span>
-                <strong className="block">1. Добавьте и перетащите</strong>
-                Нажмите на элемент в «Библиотеке» — он появится на холсте. Включите круговую симметрию, чтобы сразу
-                получить мандалу или салфетку.
-              </span>
-            </li>
-            <li className="flex gap-3">
-              <RotateCw className="mt-0.5 h-6 w-6 shrink-0 text-primary" />
-              <span>
-                <strong className="block">2. Настройте</strong>
-                Меняйте цвет и толщину нити, группируйте элементы, отражайте и меняйте порядок слоёв. Ctrl+Z отменяет
-                действие.
-              </span>
-            </li>
-            <li className="flex gap-3">
-              <Download className="mt-0.5 h-6 w-6 shrink-0 text-primary" />
-              <span>
-                <strong className="block">3. Сохраните</strong>
-                «Мои проекты» хранит схемы в браузере, PNG и PDF A4 — для печати, «Скачать .json» — файл проекта.
-              </span>
-            </li>
-          </ol>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
-
-function RulerBar({ axis, zoom, pan }: { axis: "x" | "y"; zoom: number; pan: number }) {
-  const total = axis === "x" ? W : H;
-  const step = zoom >= 2.5 ? 25 : zoom >= 1.4 ? 50 : zoom >= 0.7 ? 100 : 200;
-  const from = Math.floor(-pan / zoom / step) * step;
-  const to = from + Math.ceil(total / zoom / step) * step + step;
-  const ticks: number[] = [];
-  for (let t = from; t <= to; t += step) ticks.push(t);
-  const pos = (t: number) => ((t * zoom + pan) / total) * 100;
-
-  if (axis === "x")
-    return (
-      <div className="relative mb-1 ml-7 h-5 shrink-0 overflow-hidden rounded-md bg-secondary text-[10px] text-muted-foreground">
-        {ticks.map((t) => (
-          <span
-            key={t}
-            className="absolute top-0 flex h-full items-center border-l border-border pl-1"
-            style={{ left: `${pos(t)}%` }}
-          >
-            {t}
-          </span>
-        ))}
-      </div>
-    );
-
-  return (
-    <div className="relative w-6 shrink-0 overflow-hidden rounded-md bg-secondary text-[10px] text-muted-foreground">
-      {ticks.map((t) => (
-        <span
-          key={t}
-          className="absolute left-0 flex w-full justify-center border-t border-border pt-0.5"
-          style={{ top: `${pos(t)}%` }}
-        >
-          {t}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-
-function ElementIcon({ def, color }: { def: ElDef; color: string }) {
-  const r = 30;
-  const picotR = 5;
-  const dots = Array.from({ length: def.picots }, (_, i) => {
-    const a = (i / Math.max(def.picots, 1)) * Math.PI * 2 - Math.PI / 2;
-    return { cx: Math.cos(a) * (r + 4), cy: Math.sin(a) * (r + 4) };
-  });
-  return (
-    <svg viewBox="-45 -45 90 90" className="h-8 w-8 shrink-0" aria-hidden>
-      <g fill="none" stroke={color} strokeWidth={3}>
-        {def.kind === "ring" && (
-          <>
-            <circle r={r} />
-            {dots.map((d, i) => (
-              <circle key={i} cx={d.cx} cy={d.cy} r={picotR} />
-            ))}
-          </>
-        )}
-        {(def.kind === "arc" || def.kind === "arc-curved") && (
-          <>
-            <path d="M -34 12 A 36 36 0 0 1 34 12" />
-            {Array.from({ length: def.picots }, (_, i) => {
-              const t = (i + 1) / (def.picots + 1);
-              const a = Math.PI - t * Math.PI;
-              return <circle key={i} cx={Math.cos(a) * 40} cy={-Math.sin(a) * 40 + 12} r={4} />;
-            })}
-          </>
-        )}
-        {def.kind === "picot" && (
-          <>
-            <path d="M -26 8 Q 0 -34 26 8" />
-            <circle cy={-14} r={7} />
-          </>
-        )}
-        {def.kind === "bead" && <circle r={16} fill={color} />}
-        {def.kind === "crystal" && <polygon points="0,-28 20,0 0,28 -20,0" fill={color} />}
-        {def.kind === "text" && (
-          <text x="0" y="10" textAnchor="middle" fontSize="34" fill={color} stroke="none">
-            А1
-          </text>
-        )}
-      </g>
-    </svg>
-  );
-}

components/ui/accordion.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium cursor-pointer transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/ui/alert-dialog.tsx

@@ -1,115 +0,0 @@
-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";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

components/ui/alert.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5
-      ref={ref}
-      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-      {...props}
-    />
-  ),
-);
-AlertTitle.displayName = "AlertTitle";
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-));
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };

components/ui/aspect-ratio.tsx

@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };

components/ui/avatar.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils";
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };

components/ui/badge.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

components/ui/breadcrumb.tsx

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

components/ui/button.tsx

@@ -1,49 +0,0 @@
-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 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

components/ui/calendar.tsx

@@ -1,177 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}) {
-  const defaultClassNames = getDefaultClassNames();
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav,
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous,
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next,
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns,
-        ),
-        dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root,
-        ),
-        dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label,
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
-          defaultClassNames.weekday,
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number,
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day,
-        ),
-        range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today,
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside,
-        ),
-        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
-          }
-
-          if (orientation === "right") {
-            return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
-          }
-
-          return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  );
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
-
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
-    if (modifiers["focused"]) ref.current?.focus();
-  }, [modifiers]);
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers["selected"] &&
-        !modifiers["range_start"] &&
-        !modifiers["range_end"] &&
-        !modifiers["range_middle"]
-      }
-      data-range-start={modifiers["range_start"]}
-      data-range-end={modifiers["range_end"]}
-      data-range-middle={modifiers["range_middle"]}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Calendar, CalendarDayButton };

components/ui/card.tsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
-      {...props}
-    />
-  ),
-);
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  ),
-);
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("font-semibold leading-none tracking-tight", className)}
-      {...props}
-    />
-  ),
-);
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-  ),
-);
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-  ),
-);
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-  ),
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

components/ui/carousel.tsx

@@ -1,240 +0,0 @@
-import * as React from "react";
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) {
-      return;
-    }
-
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext],
-  );
-
-  React.useEffect(() => {
-    if (!api || !setApi) {
-      return;
-    }
-
-    setApi(api);
-  }, [api, setApi]);
-
-  React.useEffect(() => {
-    if (!api) {
-      return;
-    }
-
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        ref={ref}
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-});
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel();
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className,
-          )}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel();
-
-    return (
-      <div
-        ref={ref}
-        role="group"
-        aria-roledescription="slide"
-        className={cn(
-          "min-w-0 shrink-0 grow-0 basis-full",
-          orientation === "horizontal" ? "pl-4" : "pt-4",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute  h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeft className="h-4 w-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    );
-  },
-);
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          "absolute h-8 w-8 rounded-full",
-          orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-          className,
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRight className="h-4 w-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    );
-  },
-);
-CarouselNext.displayName = "CarouselNext";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};

components/ui/chart.tsx

@@ -1,331 +0,0 @@
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "@/lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-});
-ChartContainer.displayName = "Chart";
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string;
-      labelKey?: string;
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref,
-  ) => {
-    const { config } = useChart();
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null;
-      }
-
-      const [item] = payload;
-      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
-        );
-      }
-
-      if (!value) {
-        return null;
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
-
-    if (!active || !payload?.length) {
-      return null;
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className,
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload
-            .filter((item) => item.type !== "none")
-            .map((item, index) => {
-              const key = `${nameKey || item.name || item.dataKey || "value"}`;
-              const itemConfig = getPayloadConfigFromPayload(config, item, key);
-              const indicatorColor = color || item.payload.fill || item.color;
-
-              return (
-                <div
-                  key={item.dataKey}
-                  className={cn(
-                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                    indicator === "dot" && "items-center",
-                  )}
-                >
-                  {formatter && item?.value !== undefined && item.name ? (
-                    formatter(item.value, item.name, item, index, item.payload)
-                  ) : (
-                    <>
-                      {itemConfig?.icon ? (
-                        <itemConfig.icon />
-                      ) : (
-                        !hideIndicator && (
-                          <div
-                            className={cn(
-                              "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                              {
-                                "h-2.5 w-2.5": indicator === "dot",
-                                "w-1": indicator === "line",
-                                "w-0 border-[1.5px] border-dashed bg-transparent":
-                                  indicator === "dashed",
-                                "my-0.5": nestLabel && indicator === "dashed",
-                              },
-                            )}
-                            style={
-                              {
-                                "--color-bg": indicatorColor,
-                                "--color-border": indicatorColor,
-                              } as React.CSSProperties
-                            }
-                          />
-                        )
-                      )}
-                      <div
-                        className={cn(
-                          "flex flex-1 justify-between leading-none",
-                          nestLabel ? "items-end" : "items-center",
-                        )}
-                      >
-                        <div className="grid gap-1.5">
-                          {nestLabel ? tooltipLabel : null}
-                          <span className="text-muted-foreground">
-                            {itemConfig?.label || item.name}
-                          </span>
-                        </div>
-                        {item.value && (
-                          <span className="font-mono font-medium tabular-nums text-foreground">
-                            {item.value.toLocaleString()}
-                          </span>
-                        )}
-                      </div>
-                    </>
-                  )}
-                </div>
-              );
-            })}
-        </div>
-      </div>
-    );
-  },
-);
-ChartTooltipContent.displayName = "ChartTooltip";
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
->(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-    </div>
-  );
-});
-ChartLegendContent.displayName = "ChartLegend";
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
-  }
-
-  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};

components/ui/checkbox.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };

components/ui/collapsible.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-const Collapsible = CollapsiblePrimitive.Root;
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };

components/ui/command.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};

components/ui/context-menu.tsx

@@ -1,186 +0,0 @@
-import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const ContextMenu = ContextMenuPrimitive.Root;
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-context-menu-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-(--radix-context-menu-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
-    {...props}
-  />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-};

components/ui/dialog.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};

components/ui/drawer.tsx

@@ -1,98 +0,0 @@
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-
-import { cn } from "@/lib/utils";
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
-);
-Drawer.displayName = "Drawer";
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className,
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
-
-const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
-);
-DrawerHeader.displayName = "DrawerHeader";
-
-const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
-);
-DrawerFooter.displayName = "DrawerFooter";
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-};

components/ui/dropdown-menu.tsx

@@ -1,187 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-dropdown-menu-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "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 origin-(--radix-dropdown-menu-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

components/ui/form.tsx

@@ -1,171 +0,0 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  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 | null>(null);
-
-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, formState } = useFormContext();
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  if (!itemContext) {
-    throw new Error("useFormField should be used within <FormItem>");
-  }
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  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 | null>(null);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

components/ui/hover-card.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-
-import { cn } from "@/lib/utils";
-
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-(--radix-hover-card-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };

components/ui/input-otp.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName,
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-));
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {
-    char: null,
-    hasFakeCaret: false,
-    isActive: false,
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Minus />
-  </div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

components/ui/input.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };

components/ui/label.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };

components/ui/menubar.tsx

@@ -1,228 +0,0 @@
-import * as React from "react";
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Check, ChevronRight, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu {...props} />;
-}
-
-function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group {...props} />;
-}
-
-function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal {...props} />;
-}
-
-function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return <MenubarPrimitive.RadioGroup {...props} />;
-}
-
-function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
-}
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-      className,
-    )}
-    {...props}
-  />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-(--radix-menubar-content-transform-origin)",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  <MenubarPrimitive.Portal>
-    <MenubarPrimitive.Content
-      ref={ref}
-      align={align}
-      alignOffset={alignOffset}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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 origin-(--radix-menubar-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </MenubarPrimitive.Portal>
-));
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-
-const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-      {...props}
-    />
-  );
-};
-MenubarShortcut.displayname = "MenubarShortcut";
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-};

components/ui/navigation-menu.tsx

@@ -1,120 +0,0 @@
-import * as React from "react";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
-);
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className,
-    )}
-    {...props}
-  />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className,
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-};

components/ui/pagination.tsx

@@ -1,98 +0,0 @@
-import * as React from "react";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-);
-Pagination.displayName = "Pagination";
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
-  ),
-);
-PaginationContent.displayName = "PaginationContent";
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
-);
-PaginationItem.displayName = "PaginationItem";
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
-
-const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = "PaginationLink";
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = "PaginationNext";
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-};

components/ui/popover.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 origin-(--radix-popover-content-transform-origin)",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

components/ui/progress.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "@/lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };

components/ui/radio-group.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-3.5 w-3.5 fill-primary" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };

components/ui/resizable.tsx

@@ -1,37 +0,0 @@
-import { GripVertical } from "lucide-react";
-import { Group, Panel, Separator } from "react-resizable-panels";
-
-import { cn } from "@/lib/utils";
-
-const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof Group>) => (
-  <Group
-    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
-    {...props}
-  />
-);
-
-const ResizablePanel = Panel;
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator> & {
-  withHandle?: boolean;
-}) => (
-  <Separator
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className,
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </Separator>
-);
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

components/ui/scroll-area.tsx

@@ -1,44 +0,0 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "@/lib/utils";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

components/ui/select.tsx

@@ -1,152 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-(--radix-select-content-transform-origin)",
-        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)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};