перенос ui

2025-07-28 17:22:16 +03:00
parent 088ecc7e70
commit 27b9b79c60
46 changed files with 153 additions and 156 deletions
--- a/src/component/TemplateManager/AutocompleteInput.tsx
+++ b/src/component/TemplateManager/AutocompleteInput.tsx
@@ -1,8 +1,8 @@
-import { Button } from '@/component/ui/button'
-import { Input } from '@/component/ui/input'
-import { Label } from '@/component/ui/label'
 import { ChevronDown, X } from 'lucide-react'
 import React, { useEffect, useRef, useState } from 'react'
+import { Button } from 'shared/ui/button'
+import { Input } from 'shared/ui/input'
+import { Label } from 'shared/ui/label'

 interface AutocompleteInputProps {
  label: string
--- a/src/component/TemplateManager/CategoryFieldsSelector.tsx
+++ b/src/component/TemplateManager/CategoryFieldsSelector.tsx
@@ -1,9 +1,9 @@
-import { Input } from '@/component/ui/input'
-import { Label } from '@/component/ui/label'
 import { useCategoryContext } from '@/entity/template/model/CategoryContext'
 import { Attribute } from '@/type/template'
 import { AlertCircle } from 'lucide-react'
 import React from 'react'
+import { Input } from 'shared/ui/input'
+import { Label } from 'shared/ui/label'

 interface AttributeValue {
  attributeId: string
--- a/src/component/TemplateManager/ElementConstructor.tsx
+++ b/src/component/TemplateManager/ElementConstructor.tsx
@@ -23,27 +23,27 @@ import {
  Type,
 } from 'lucide-react'
 import React, { useState } from 'react'
-import { v4 as uuidv4 } from 'uuid'
-import { Button } from '../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
-import { Checkbox } from '../ui/checkbox'
+import { Button } from 'shared/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from 'shared/ui/card'
+import { Checkbox } from 'shared/ui/checkbox'
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
-} from '../ui/dialog'
-import { Input } from '../ui/input'
-import { Label } from '../ui/label'
+} from 'shared/ui/dialog'
+import { Input } from 'shared/ui/input'
+import { Label } from 'shared/ui/label'
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from '../ui/select'
-import { Separator } from '../ui/separator'
+} from 'shared/ui/select'
+import { Separator } from 'shared/ui/separator'
+import { v4 as uuidv4 } from 'uuid'
 import { ElementFormulaBar } from './ElementFormulaBar'
 import { VisualLayoutEditor } from './VisualLayoutEditor'

--- a/src/component/TemplateManager/ElementFormulaBar.tsx
+++ b/src/component/TemplateManager/ElementFormulaBar.tsx
@@ -1,6 +1,6 @@
 import { Eye, EyeOff, Magnet, Plus, Save, Wrench } from 'lucide-react'
 import { memo } from 'react'
-import { Button } from '../ui/button'
+import { Button } from 'shared/ui/button'

 interface ElementFormulaBarProps {
  elementCount: number
--- a/src/component/TemplateManager/ExcelUploadPanel.tsx
+++ b/src/component/TemplateManager/ExcelUploadPanel.tsx
@@ -1,7 +1,7 @@
-import { Button } from '@/component/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/component/ui/popover'
 import { FileText, Upload } from 'lucide-react'
 import React, { useRef } from 'react'
+import { Button } from 'shared/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from 'shared/ui/popover'

 interface ExcelUploadPanelProps {
  fileName?: string
--- a/src/component/TemplateManager/FormattingToolbar.tsx
+++ b/src/component/TemplateManager/FormattingToolbar.tsx
@@ -1,5 +1,3 @@
-import { Button } from '@/component/ui/button'
-import { Separator } from '@/component/ui/separator'
 import {
  AlignCenter,
  AlignLeft,
@@ -12,6 +10,8 @@ import {
  Underline,
 } from 'lucide-react'
 import React from 'react'
+import { Button } from 'shared/ui/button'
+import { Separator } from 'shared/ui/separator'

 export const FormattingToolbar: React.FC = () => (
  <div className="flex items-center gap-0.5 rounded-lg border bg-background p-0.5">
--- a/src/component/TemplateManager/HeaderBar.tsx
+++ b/src/component/TemplateManager/HeaderBar.tsx
@@ -1,8 +1,8 @@
-import { Button } from '@/component/ui/button'
 import { Template } from '@/type/template'
 import { ArrowLeft, FileText, Settings, Wrench } from 'lucide-react'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Button } from 'shared/ui/button'

 interface HeaderBarProps {
  template: Template
--- a/src/component/TemplateManager/TemplateFilterSidebar.tsx
+++ b/src/component/TemplateManager/TemplateFilterSidebar.tsx
@@ -1,5 +1,10 @@
 import { AutocompleteInput } from '@/component/TemplateManager/AutocompleteInput'
-import { Button } from '@/component/ui/button'
+import { useCategoryContext } from '@/entity/template/model/CategoryContext'
+import { Template } from '@/type/template'
+import { Filter, X } from 'lucide-react'
+import React, { useMemo } from 'react'
+import { Button } from 'shared/ui/button'
+import { Label } from 'shared/ui/label'
 import {
  Sidebar,
  SidebarContent,
@@ -8,12 +13,7 @@ import {
  SidebarGroupLabel,
  SidebarHeader,
  SidebarSeparator,
-} from '@/component/ui/sidebar'
-import { useCategoryContext } from '@/entity/template/model/CategoryContext'
-import { Template } from '@/type/template'
-import { Filter, X } from 'lucide-react'
-import React, { useMemo } from 'react'
-import { Label } from '../ui/label'
+} from 'shared/ui/sidebar'

 export interface TemplateFilters {
  name: string
--- a/src/component/TemplateManager/TemplateManager.tsx
+++ b/src/component/TemplateManager/TemplateManager.tsx
@@ -1,10 +1,10 @@
 import { useTemplateContext } from '@/entity/template/model/TemplateContext'
 import { Template } from '@/type/template'
+import TemplateCard from '@/widget/template/ui/TemplateCard'
 import { Circle, CircleCheck, FileText, Plus, Trash2 } from 'lucide-react'
 import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import TemplateCard from '../../widget/template/ui/TemplateCard'
-import { Button } from '../ui/button'
+import { Button } from 'shared/ui/button'
 import {
  Dialog,
  DialogContent,
@@ -12,8 +12,8 @@ import {
  DialogHeader,
  DialogTitle,
  DialogTrigger,
-} from '../ui/dialog'
-import { Input } from '../ui/input'
+} from 'shared/ui/dialog'
+import { Input } from 'shared/ui/input'
 import { TemplateEditor } from './TemplateEditor'

 interface TemplateManagerProps {
--- a/src/component/TemplateManager/VisualLayoutEditor.tsx
+++ b/src/component/TemplateManager/VisualLayoutEditor.tsx
@@ -1,13 +1,13 @@
-import { Edit, Grid, Move, Trash2 } from 'lucide-react'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Rnd } from 'react-rnd'
-import { getElementDefinition } from '../../entity/element/model/interface'
+import { getElementDefinition } from '@/entity/element/model/interface'
 import {
  ElementLayout,
  FormLayoutSettings,
  TemplateElement,
-} from '../../type/template'
-import { Button } from '../ui/button'
+} from '@/type/template'
+import { Edit, Grid, Move, Trash2 } from 'lucide-react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Rnd } from 'react-rnd'
+import { Button } from 'shared/ui/button'

 // Минимальные размеры для разных типов элементов.
 // Если понадобится скорректировать размеры для конкретного элемента,
--- a/src/component/ui/alert.tsx
+++ b/src/component/ui/alert.tsx
@@ -1,62 +0,0 @@
-import { cn } from '@/lib/utils'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-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',
-        warning:
-          'border-amber-500/50 text-amber-700 bg-amber-50 dark:border-amber-500 dark:text-amber-400 dark:bg-amber-950 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400',
-        success:
-          'border-green-500/50 text-green-700 bg-green-50 dark:border-green-500 dark:text-green-400 dark:bg-green-950 [&>svg]:text-green-600 dark:[&>svg]:text-green-400',
-      },
-    },
-    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, AlertDescription, AlertTitle }
--- a/src/component/ui/badge.tsx
+++ b/src/component/ui/badge.tsx
@@ -1,36 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '../../lib/utils'
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full 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 hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground 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 }
--- a/src/component/ui/button.tsx
+++ b/src/component/ui/button.tsx
@@ -1,57 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
--- a/src/component/ui/calendar.tsx
+++ b/src/component/ui/calendar.tsx
@@ -1,213 +0,0 @@
-'use client'
-
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from 'lucide-react'
-import * as React from 'react'
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
-
-import { Button, buttonVariants } from '@/component/ui/button'
-import { cn } from '@/lib/utils'
-
-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(
-        'group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[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(
-          'flex gap-4 flex-col md:flex-row relative',
-          defaultClassNames.months
-        ),
-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-        nav: cn(
-          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          'absolute bg-popover inset-0 opacity-0',
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          'select-none font-medium',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
-          defaultClassNames.caption_label
-        ),
-        table: 'w-full border-collapse',
-        weekdays: cn('flex', defaultClassNames.weekdays),
-        weekday: cn(
-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
-          defaultClassNames.weekday
-        ),
-        week: cn('flex w-full mt-2', defaultClassNames.week),
-        week_number_header: cn(
-          'select-none w-(--cell-size)',
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          'text-[0.8rem] select-none text-muted-foreground',
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          'rounded-l-md bg-accent',
-          defaultClassNames.range_start
-        ),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', 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="size-(--cell-size) flex 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.focused])
-
-  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(
-        'min-w-(--cell-size) flex aspect-square size-auto w-full 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 data-[range-end=true]:rounded-r-md data-[range-start=true]:rounded-l-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70',
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }
--- a/src/component/ui/card.tsx
+++ b/src/component/ui/card.tsx
@@ -1,79 +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-lg border bg-card text-card-foreground shadow-sm',
-      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(
-      'text-2xl 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, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
--- a/src/component/ui/checkbox.tsx
+++ b/src/component/ui/checkbox.tsx
@@ -1,27 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
-import * as React from '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(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
--- a/src/component/ui/dialog.tsx
+++ b/src/component/ui/dialog.tsx
@@ -1,119 +0,0 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { X } from 'lucide-react'
-import * as React from '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(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-background/80 backdrop-blur-sm',
-      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(
-        '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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] 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 sm:rounded-lg',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background 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,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
--- a/src/component/ui/input.tsx
+++ b/src/component/ui/input.tsx
@@ -1,24 +0,0 @@
-import * as React from 'react'
-import { cn } from '../../lib/utils'
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = 'Input'
-
-export { Input }
--- a/src/component/ui/label.tsx
+++ b/src/component/ui/label.tsx
@@ -1,24 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-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 }
--- a/src/component/ui/popover.tsx
+++ b/src/component/ui/popover.tsx
@@ -1,28 +0,0 @@
-import { cn } from '@/lib/utils'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import * as React from 'react'
-
-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',
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
--- a/src/component/ui/radio-group.tsx
+++ b/src/component/ui/radio-group.tsx
@@ -1,41 +0,0 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { Circle } from 'lucide-react'
-import * as React from '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 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }
--- a/src/component/ui/select.tsx
+++ b/src/component/ui/select.tsx
@@ -1,185 +0,0 @@
-'use client'
-
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = 'default',
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: 'sm' | 'default'
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = 'popper',
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          '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 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
--- a/src/component/ui/separator.tsx
+++ b/src/component/ui/separator.tsx
@@ -1,29 +0,0 @@
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }
--- a/src/component/ui/sidebar.tsx
+++ b/src/component/ui/sidebar.tsx
@@ -1,416 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { PanelLeftIcon } from 'lucide-react'
-import * as React from 'react'
-
-import { Button } from '@/component/ui/button'
-import { Input } from '@/component/ui/input'
-import { Separator } from '@/component/ui/separator'
-import { cn } from '@/lib/utils'
-
-const SIDEBAR_COOKIE_NAME = 'sidebar_state'
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
-
-type SidebarContextProps = {
-  state: 'expanded' | 'collapsed'
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.')
-  }
-
-  return context
-}
-
-// Simple mobile hook implementation
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(false)
-
-  React.useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768)
-    }
-
-    checkMobile()
-    window.addEventListener('resize', checkMobile)
-    return () => window.removeEventListener('resize', checkMobile)
-  }, [])
-
-  return isMobile
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open)
-  }, [isMobile, setOpen, setOpenMobile])
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [toggleSidebar])
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? 'expanded' : 'collapsed'
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <div
-        data-slot="sidebar-wrapper"
-        style={
-          {
-            '--sidebar-width': SIDEBAR_WIDTH,
-            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-            ...style,
-          } as React.CSSProperties
-        }
-        className={cn(
-          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    </SidebarContext.Provider>
-  )
-}
-
-function Sidebar({
-  side = 'left',
-  variant = 'sidebar',
-  collapsible = 'offcanvas',
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-  if (collapsible === 'none') {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (isMobile) {
-    return (
-      <div
-        className="fixed inset-0 z-50 bg-black/50"
-        onClick={() => setOpenMobile(false)}
-      >
-        <div
-          className={cn(
-            'fixed inset-y-0 left-0 w-[--sidebar-width] bg-background p-4 text-foreground shadow-lg transition-transform duration-300',
-            openMobile ? 'translate-x-0' : '-translate-x-full'
-          )}
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          onClick={e => e.stopPropagation()}
-        >
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className="text-sidebar-foreground group peer hidden md:block"
-      data-state={state}
-      data-collapsible={state === 'collapsed' ? collapsible : ''}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          'group-data-[side=right]:rotate-180',
-          variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'
-            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
-          side === 'left'
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-          // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]'
-            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="flex h-full w-full flex-col border-r bg-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn('size-7', className)}
-      onClick={event => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        'relative flex w-full flex-1 flex-col bg-background',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn('h-8 w-full bg-background shadow-none', className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn('flex flex-col gap-2 p-2', className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn('flex flex-col gap-2 p-2', className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn('mx-2 w-auto bg-border', className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div'
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        'outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-foreground/70 ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn('w-full text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarProvider,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
--- a/src/component/ui/textarea.tsx
+++ b/src/component/ui/textarea.tsx
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { cn } from '../../lib/utils'
-
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = 'Textarea'
-
-export { Textarea }
--- a/src/component/ui/toast.tsx
+++ b/src/component/ui/toast.tsx
@@ -1,176 +0,0 @@
-import { X } from 'lucide-react'
-import { FC, useEffect, useState } from 'react'
-
-export type ToastType = 'success' | 'error' | 'warning' | 'info'
-
-export interface Toast {
-  id: string
-  type: ToastType
-  title?: string
-  message: string
-  duration?: number
-}
-
-interface ToastProps {
-  toast: Toast
-  onRemove: (id: string) => void
-}
-
-const ToastComponent: FC<ToastProps> = ({ toast, onRemove }) => {
-  const [isVisible, setIsVisible] = useState(false)
-  const [isRemoving, setIsRemoving] = useState(false)
-
-  useEffect(() => {
-    // Показываем уведомление с анимацией
-    setIsVisible(true)
-
-    // Автоматическое скрытие
-    const duration = toast.duration || 5000
-    const timer = setTimeout(() => {
-      handleRemove()
-    }, duration)
-
-    return () => clearTimeout(timer)
-  }, [])
-
-  const handleRemove = () => {
-    setIsRemoving(true)
-    setTimeout(() => {
-      onRemove(toast.id)
-    }, 300) // Время анимации
-  }
-
-  const getTypeStyles = () => {
-    switch (toast.type) {
-      case 'success':
-        return 'bg-green-50 border-green-200 text-green-800'
-      case 'error':
-        return 'bg-red-50 border-red-200 text-red-800'
-      case 'warning':
-        return 'bg-yellow-50 border-yellow-200 text-yellow-800'
-      case 'info':
-        return 'bg-blue-50 border-blue-200 text-blue-800'
-      default:
-        return 'bg-gray-50 border-gray-200 text-gray-800'
-    }
-  }
-
-  const getIconColor = () => {
-    switch (toast.type) {
-      case 'success':
-        return 'text-green-600'
-      case 'error':
-        return 'text-red-600'
-      case 'warning':
-        return 'text-yellow-600'
-      case 'info':
-        return 'text-blue-600'
-      default:
-        return 'text-gray-600'
-    }
-  }
-
-  const getIcon = () => {
-    switch (toast.type) {
-      case 'success':
-        return (
-          <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fillRule="evenodd"
-              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-              clipRule="evenodd"
-            />
-          </svg>
-        )
-      case 'error':
-        return (
-          <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fillRule="evenodd"
-              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-              clipRule="evenodd"
-            />
-          </svg>
-        )
-      case 'warning':
-        return (
-          <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fillRule="evenodd"
-              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-              clipRule="evenodd"
-            />
-          </svg>
-        )
-      case 'info':
-        return (
-          <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fillRule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-              clipRule="evenodd"
-            />
-          </svg>
-        )
-    }
-  }
-
-  return (
-    <div
-      className={`
-        mb-3 transform rounded-lg border p-4 shadow-lg transition-all duration-300 ease-in-out
-        ${getTypeStyles()}
-        ${
-          isVisible && !isRemoving
-            ? 'translate-x-0 opacity-100'
-            : '-translate-x-full opacity-0'
-        }
-      `}
-    >
-      <div className="flex items-start">
-        <div className={`flex-shrink-0 ${getIconColor()}`}>{getIcon()}</div>
-        <div className="ml-3 flex-1">
-          {toast.title && (
-            <h3 className="text-sm font-medium">{toast.title}</h3>
-          )}
-          <div className={`text-sm ${toast.title ? 'mt-1' : ''}`}>
-            {toast.message}
-          </div>
-        </div>
-        <div className="ml-4 flex flex-shrink-0">
-          <button
-            onClick={handleRemove}
-            className={`
-              inline-flex rounded-md p-1.5 transition-colors
-              ${getIconColor()} hover:bg-black/10 focus:outline-none focus:ring-2 focus:ring-black/20
-            `}
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface ToastContainerProps {
-  toasts: Toast[]
-  onRemove: (id: string) => void
-}
-
-export const ToastContainer: FC<ToastContainerProps> = ({
-  toasts,
-  onRemove,
-}) => {
-  if (toasts.length === 0) return null
-
-  return (
-    <div className="pointer-events-none fixed bottom-4 left-4 z-[100] flex w-full max-w-sm flex-col-reverse">
-      {toasts.map(toast => (
-        <div key={toast.id} className="pointer-events-auto">
-          <ToastComponent toast={toast} onRemove={onRemove} />
-        </div>
-      ))}
-    </div>
-  )
-}
--- a/src/entity/element/model/implementations/ButtonGroup.tsx
+++ b/src/entity/element/model/implementations/ButtonGroup.tsx
@@ -1,9 +1,9 @@
-import { Button } from '@/component/ui/button'
-import { Input } from '@/component/ui/input'
 import { ElementDefinition } from '@/entity/element/model/interface'
 import { CellsBadge } from '@/entity/element/ui/cellsBadge'
 import { ElementOption } from '@/type/template'
 import { Plus, Square, Trash2 } from 'lucide-react'
+import { Button } from 'shared/ui/button'
+import { Input } from 'shared/ui/input'

 interface ButtonGroupConfig {
  placeholder?: string
--- a/src/entity/element/model/implementations/SelectElement.tsx
+++ b/src/entity/element/model/implementations/SelectElement.tsx
@@ -1,5 +1,10 @@
-import { Button } from '@/component/ui/button'
-import { Input } from '@/component/ui/input'
+import { ElementDefinition } from '@/entity/element/model/interface'
+import { CellsBadge } from '@/entity/element/ui/cellsBadge'
+import { useToast } from '@/lib/hooks/useToast'
+import { ElementOption } from '@/type/template'
+import { ChevronDown, Plus, Trash2 } from 'lucide-react'
+import { Button } from 'shared/ui/button'
+import { Input } from 'shared/ui/input'
 import {
  Select,
  SelectContent,
@@ -7,12 +12,7 @@ import {
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from '@/component/ui/select'
-import { ElementDefinition } from '@/entity/element/model/interface'
-import { CellsBadge } from '@/entity/element/ui/cellsBadge'
-import { useToast } from '@/lib/hooks/useToast'
-import { ElementOption } from '@/type/template'
-import { ChevronDown, Plus, Trash2 } from 'lucide-react'
+} from 'shared/ui/select'

 interface SelectConfig {
  placeholder?: string
--- a/src/entity/element/model/implementations/StandardsElement/StandardsEditor.tsx
+++ b/src/entity/element/model/implementations/StandardsElement/StandardsEditor.tsx
@@ -1,13 +1,13 @@
-import { Button } from '@/component/ui/button'
+import { Info, Settings } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from 'shared/ui/button'
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from '@/component/ui/select'
-import { Info, Settings } from 'lucide-react'
-import { useState } from 'react'
+} from 'shared/ui/select'
 import { StandardsSelector } from './StandardsSelector'
 import { StandardsConfig } from './definition'

--- a/src/entity/element/model/implementations/StandardsElement/StandardsPreview.tsx
+++ b/src/entity/element/model/implementations/StandardsElement/StandardsPreview.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@/component/ui/button'
-import { Label } from '@/component/ui/label'
 import { FileText, Settings } from 'lucide-react'
+import { Button } from 'shared/ui/button'
+import { Label } from 'shared/ui/label'
 import { StandardsConfig } from './definition'

 interface StandardsPreviewProps {
--- a/src/entity/element/model/implementations/StandardsElement/StandardsSelector.tsx
+++ b/src/entity/element/model/implementations/StandardsElement/StandardsSelector.tsx
@@ -1,13 +1,3 @@
-import { Badge } from '@/component/ui/badge'
-import { Button } from '@/component/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/component/ui/dialog'
-import { Input } from '@/component/ui/input'
-import { Separator } from '@/component/ui/separator'
 import { useToast } from '@/lib/hooks/useToast'
 import {
  DndContext,
@@ -36,6 +26,16 @@ import {
  X,
 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { Badge } from 'shared/ui/badge'
+import { Button } from 'shared/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from 'shared/ui/dialog'
+import { Input } from 'shared/ui/input'
+import { Separator } from 'shared/ui/separator'
 import { useStandards } from './hooks'
 import { Standard } from './types'

--- a/src/entity/element/model/implementations/StandardsElement/definition.tsx
+++ b/src/entity/element/model/implementations/StandardsElement/definition.tsx
@@ -1,11 +1,11 @@
-import { Badge } from '@/component/ui/badge'
-import { Button } from '@/component/ui/button'
-import { Label } from '@/component/ui/label'
 import { ElementDefinition } from '@/entity/element/model/interface'
 import { CellsBadge } from '@/entity/element/ui/cellsBadge'
 import { CellTarget } from '@/type/template'
 import { FileText, Settings, Weight } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { Badge } from 'shared/ui/badge'
+import { Button } from 'shared/ui/button'
+import { Label } from 'shared/ui/label'
 import { useStandards } from './hooks'
 import { StandardsEditor } from './StandardsEditor'
 import { StandardsPreview } from './StandardsPreview'
--- a/src/entity/element/model/implementations/TextElement.tsx
+++ b/src/entity/element/model/implementations/TextElement.tsx
@@ -1,9 +1,9 @@
-import { Checkbox } from '@/component/ui/checkbox'
-import { Input } from '@/component/ui/input'
 import { ElementDefinition } from '@/entity/element/model/interface'
 import { CellsBadge } from '@/entity/element/ui/cellsBadge'
 import { Plus, Save, SaveOff, Type } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { Checkbox } from 'shared/ui/checkbox'
+import { Input } from 'shared/ui/input'

 interface TextConfig {
  placeholder?: string
--- a/src/entity/element/model/implementations/VerificationConditionsElement/VerificationConditionsEditor.tsx
+++ b/src/entity/element/model/implementations/VerificationConditionsElement/VerificationConditionsEditor.tsx
@@ -1,14 +1,14 @@
-import { Badge } from '@/component/ui/badge'
-import { Label } from '@/component/ui/label'
+import { CellTarget } from '@/type/template'
+import { Building2, Calendar } from 'lucide-react'
+import { Badge } from 'shared/ui/badge'
+import { Label } from 'shared/ui/label'
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from '@/component/ui/select'
-import { CellTarget } from '@/type/template'
-import { Building2, Calendar } from 'lucide-react'
+} from 'shared/ui/select'
 import { useLaboratories, useLaboratoryConditions } from './hooks'
 import { ConditionMapping, VerificationConditionsConfig } from './types'

--- a/src/entity/element/model/implementations/VerificationConditionsElement/VerificationConditionsPreview.tsx
+++ b/src/entity/element/model/implementations/VerificationConditionsElement/VerificationConditionsPreview.tsx
@@ -1,5 +1,3 @@
-import { Button } from '@/component/ui/button'
-import { Card, CardContent } from '@/component/ui/card'
 import {
  AlertCircle,
  Building2,
@@ -9,6 +7,8 @@ import {
  Settings,
  Thermometer,
 } from 'lucide-react'
+import { Button } from 'shared/ui/button'
+import { Card, CardContent } from 'shared/ui/card'
 import { VerificationConditionsConfig } from './types'

 interface VerificationConditionsPreviewProps {
--- a/src/entity/element/model/implementations/VerificationConditionsElement/VerificationConditionsRender.tsx
+++ b/src/entity/element/model/implementations/VerificationConditionsElement/VerificationConditionsRender.tsx
@@ -1,14 +1,3 @@
-import { Button } from '@/component/ui/button'
-import { Card, CardContent } from '@/component/ui/card'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/component/ui/dialog'
-import { Input } from '@/component/ui/input'
-import { Label } from '@/component/ui/label'
 import { CellsBadge } from '@/entity/element/ui/cellsBadge'
 import {
  AlertCircle,
@@ -21,6 +10,17 @@ import {
  Thermometer,
 } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { Button } from 'shared/ui/button'
+import { Card, CardContent } from 'shared/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from 'shared/ui/dialog'
+import { Input } from 'shared/ui/input'
+import { Label } from 'shared/ui/label'
 import {
  useDailyConditions,
  useLaboratories,
--- a/src/lib/hooks/useToast.tsx
+++ b/src/lib/hooks/useToast.tsx
@@ -1,4 +1,3 @@
-import { Toast, ToastContainer, ToastType } from '@/component/ui/toast'
 import {
  createContext,
  FC,
@@ -7,6 +6,7 @@ import {
  useContext,
  useState,
 } from 'react'
+import { Toast, ToastContainer, ToastType } from 'shared/ui/toast'

 interface ToastContextType {
  showToast: (
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,15 +1,9 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
 import {
  CellTarget,
  ElementLayout,
  FormLayoutSettings,
  TemplateElement,
-} from '../type/template'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+} from '@/type/template'

 // Миграция элементов из старого формата в новый
 export function migrateTemplateElement(element: any): TemplateElement {
--- a/src/page/standards-management/Page.tsx
+++ b/src/page/standards-management/Page.tsx
@@ -1,13 +1,3 @@
-import { Badge } from '@/component/ui/badge'
-import { Button } from '@/component/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/component/ui/dialog'
-import { Input } from '@/component/ui/input'
-import { Label } from '@/component/ui/label'
 import {
  useCreateStandard,
  useDeleteStandard,
@@ -30,6 +20,16 @@ import {
  Weight,
 } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { Badge } from 'shared/ui/badge'
+import { Button } from 'shared/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from 'shared/ui/dialog'
+import { Input } from 'shared/ui/input'
+import { Label } from 'shared/ui/label'

 export const StandardsManagementPage = () => {
  const [searchTerm, setSearchTerm] = useState('')
--- a/src/page/templates/Page.tsx
+++ b/src/page/templates/Page.tsx
@@ -3,24 +3,6 @@ import {
  TemplateFilterSidebar,
  TemplateFilters,
 } from '@/component/TemplateManager/TemplateFilterSidebar'
-import { Button } from '@/component/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/component/ui/card'
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/component/ui/dialog'
-import { Input } from '@/component/ui/input'
-import { Separator } from '@/component/ui/separator'
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from '@/component/ui/sidebar'
 import {
  apiTemplateWithAttributesToTemplate,
  getTemplateWithAttributesApi,
@@ -41,6 +23,24 @@ import {
  Type,
 } from 'lucide-react'
 import { useCallback, useMemo, useState } from 'react'
+import { Button } from 'shared/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from 'shared/ui/card'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from 'shared/ui/dialog'
+import { Input } from 'shared/ui/input'
+import { Separator } from 'shared/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from 'shared/ui/sidebar'

 interface AttributeValue {
  attributeId: string
--- a/src/page/templates/elements/Page.tsx
+++ b/src/page/templates/elements/Page.tsx
@@ -1,11 +1,11 @@
 import { ElementConstructor } from '@/component/TemplateManager/ElementConstructor'
-import { Button } from '@/component/ui/button'
 import { useTemplateContext } from '@/entity/template/model/TemplateContext'
 import { useDelayedSave } from '@/hook/useDelayedSave'
 import { FormLayoutSettings, Template, TemplateElement } from '@/type/template'
 import { ArrowLeft, FileText, Settings, Wrench } from 'lucide-react'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import { Button } from 'shared/ui/button'

 export const ElementsCreation: FC = () => {
  const navigate = useNavigate()
--- a/src/page/templates/protocols/Page.tsx
+++ b/src/page/templates/protocols/Page.tsx
@@ -1,5 +1,4 @@
 import DualSpreadsheet from '@/component/DualSpreadsheet/DualSpreadsheet'
-import { Button } from '@/component/ui/button'
 import { getElementDefinition } from '@/entity/element/model/interface'
 import { useTemplateContext } from '@/entity/template/model/TemplateContext'
 import { cellAddressToCoordinates } from '@/lib/cell-utils'
@@ -9,6 +8,7 @@ import { Template, TemplateElement } from '@/type/template'
 import { ArrowLeft, FileText, Grid, Save, Settings, Wrench } from 'lucide-react'
 import { FC, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import { Button } from 'shared/ui/button'

 interface ProtocolFormProps {
  template: Template
--- a/src/widget/template/ui/TemplateCard.tsx
+++ b/src/widget/template/ui/TemplateCard.tsx
@@ -1,11 +1,11 @@
-import { Button } from '@/component/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/component/ui/card'
-import { Popover, PopoverContent, PopoverTrigger } from '@/component/ui/popover'
 import { Template, TemplateAttributeDetail } from '@/type/template'
 import clsx from 'clsx'
 import { Check, Copy, MoreVertical, Pencil, Trash2 } from 'lucide-react'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Button } from 'shared/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from 'shared/ui/card'
+import { Popover, PopoverContent, PopoverTrigger } from 'shared/ui/popover'

 interface TemplateCardProps {
  template: Template & { attributes?: TemplateAttributeDetail[] }