refactor: replace barrel imports with direct module imports for tree-shaking

Replace all `from '@/api'` barrel imports with direct imports from
specific module files (e.g. `from '@/api/trees'`) across 20 files.
This enables better tree-shaking so each page only bundles the API
modules it actually uses.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/common/TagInput.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { X, Plus } from 'lucide-react'
-import { tagsApi } from '@/api'
+import { tagsApi } from '@/api/tags'
 import type { TagListItem } from '@/types'
 import { cn } from '@/lib/utils'
 

frontend/src/components/library/AddToFolderMenu.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { FolderPlus, Check, Plus } from 'lucide-react'
-import { foldersApi } from '@/api'
+import { foldersApi } from '@/api/folders'
 import type { FolderListItem } from '@/types'
 import { cn } from '@/lib/utils'
 

frontend/src/components/library/FolderEditModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { X } from 'lucide-react'
-import { foldersApi } from '@/api'
+import { foldersApi } from '@/api/folders'
 import type { FolderListItem, FolderCreate, FolderUpdate } from '@/types'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'

frontend/src/components/library/FolderSidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Folder, ChevronDown, ChevronRight, Plus, MoreVertical, Pencil, Trash2, FolderPlus, X } from 'lucide-react'
-import { foldersApi } from '@/api'
+import { foldersApi } from '@/api/folders'
 import type { FolderListItem, FolderTreeItem } from '@/types'
 import { cn } from '@/lib/utils'
 

frontend/src/components/library/ShareTreeModal.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { X, Copy, Check, Link2, Users, Lock, Globe } from 'lucide-react'
 import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
-import { treesApi } from '@/api'
+import { treesApi } from '@/api/trees'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 

frontend/src/components/step-library/StepDetailModal.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { X, Star, Copy, Check, HelpCircle, Zap, CheckCircle, User, Calendar } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
-import { stepsApi } from '@/api'
+import { stepsApi } from '@/api/steps'
 import type { Step, Review } from '@/types/step'
 
 interface StepDetailModalProps {

frontend/src/components/step-library/StepForm.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Plus, X, HelpCircle, Zap, CheckCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { stepCategoriesApi } from '@/api'
+import { stepCategoriesApi } from '@/api/stepCategories'
 import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
 
 interface StepFormProps {

frontend/src/components/step-library/StepLibraryBrowser.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useMemo } from 'react'
 import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { stepsApi, stepCategoriesApi } from '@/api'
+import { stepsApi } from '@/api/steps'
+import { stepCategoriesApi } from '@/api/stepCategories'
 import { StepCard } from './StepCard'
 import { StepDetailModal } from './StepDetailModal'
 import type { Step, StepListItem, StepCategory, PopularTag, StepListParams } from '@/types/step'

frontend/src/components/tree-editor/TreeMetadataForm.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { categoriesApi } from '@/api'
+import { categoriesApi } from '@/api/categories'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import { TagInput } from '@/components/common/TagInput'
 import type { CategoryListItem } from '@/types'

frontend/src/hooks/useCustomStepFlow.ts

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { sessionsApi, stepsApi } from '@/api'
+import { sessionsApi } from '@/api/sessions'
-import { treesApi } from '@/api'
+import { stepsApi } from '@/api/steps'
+import { treesApi } from '@/api/trees'
 import type { Tree, Session, DecisionRecord, TreeStructure, CustomStep, Step } from '@/types'
 import type { CustomStepDraft } from '@/components/step-library/CustomStepModal'
 import type { DescendantNode } from '@/components/session'

frontend/src/pages/AccountSettingsPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree } from 'lucide-react'
-import { accountsApi } from '@/api'
+import { accountsApi } from '@/api/accounts'
 import type { Account, AccountMember, AccountInvite } from '@/types'
 import { cn } from '@/lib/utils'
 import { usePermissions } from '@/hooks/usePermissions'

frontend/src/pages/AdminCategoriesPage.tsx

@@ -3,7 +3,8 @@ import { Plus } from 'lucide-react'
 import { DndContext, closestCenter } from '@dnd-kit/core'
 import type { DragEndEvent } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'
-import { stepCategoriesApi, stepsApi } from '@/api'
+import { stepCategoriesApi } from '@/api/stepCategories'
+import { stepsApi } from '@/api/steps'
 import { CategoryRow } from '@/components/admin/CategoryRow'
 import { CreateCategoryModal } from '@/components/admin/CreateCategoryModal'
 import { EditCategoryModal } from '@/components/admin/EditCategoryModal'

frontend/src/pages/MyTreesPage.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree } from 'lucide-react'
-import { treesApi, sessionsApi } from '@/api'
+import { treesApi } from '@/api/trees'
+import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { ConfirmDialog } from '@/components/common/ConfirmDialog'

frontend/src/pages/RegisterPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
-import { inviteApi } from '@/api'
+import { inviteApi } from '@/api/invite'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { cn } from '@/lib/utils'
 

frontend/src/pages/SessionDetailPage.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { Copy, Check, Eye, Save } from 'lucide-react'
-import { sessionsApi, stepsApi } from '@/api'
+import { sessionsApi } from '@/api/sessions'
+import { stepsApi } from '@/api/steps'
 import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
 import { SaveSessionAsTreeModal } from '@/components/session/SaveSessionAsTreeModal'
 import { StepRatingModal } from '@/components/session/StepRatingModal'

frontend/src/pages/SessionHistoryPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { sessionsApi, treesApi } from '@/api'
+import { sessionsApi } from '@/api/sessions'
+import { treesApi } from '@/api/trees'
 import type { Session, TreeListItem } from '@/types'
 import type { DateRange } from 'react-day-picker'
 import { SessionFilters } from '@/components/session/SessionFilters'

frontend/src/pages/TreeEditorPage.tsx

@@ -3,7 +3,8 @@ import { useParams, useNavigate, useBlocker } from 'react-router-dom'
 import { useStore } from 'zustand'
 import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList } from 'lucide-react'
 import { getMonacoEditor } from '@/components/tree-editor/code-mode'
-import { treesApi, treeMarkdownApi } from '@/api'
+import { treesApi } from '@/api/trees'
+import { treeMarkdownApi } from '@/api/treeMarkdown'
 import type { TreeCreate, TreeUpdate, TreeStatus } from '@/types'
 import { useTreeEditorStore, useTreeEditorTemporal } from '@/store/treeEditorStore'
 import { TreeEditorLayout } from '@/components/tree-editor/TreeEditorLayout'

frontend/src/pages/TreeLibraryPage.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { Plus, X, FolderOpen } from 'lucide-react'
-import { treesApi, categoriesApi, foldersApi } from '@/api'
+import { treesApi } from '@/api/trees'
+import { categoriesApi } from '@/api/categories'
+import { foldersApi } from '@/api/folders'
 import type { TreeListItem, CategoryListItem, FolderListItem } from '@/types'
 import { FolderSidebar } from '@/components/library/FolderSidebar'
 import { FolderEditModal } from '@/components/library/FolderEditModal'

frontend/src/pages/TreeNavigationPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useParams, useNavigate, useLocation } from 'react-router-dom'
-import { treesApi, sessionsApi } from '@/api'
+import { treesApi } from '@/api/trees'
+import { sessionsApi } from '@/api/sessions'
 import { useTreeNavigationShortcuts } from '@/hooks/useKeyboardShortcuts'
 import { useCustomStepFlow } from '@/hooks/useCustomStepFlow'
 import type { Tree, Session, DecisionRecord, TreeStructure } from '@/types'

frontend/src/store/authStore.ts

@@ -1,8 +1,8 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import type { User, Token, UserCreate, UserLogin, Account, SubscriptionDetails } from '@/types'
-import { authApi } from '@/api'
+import { authApi } from '@/api/auth'
-import { apiClient } from '@/api'
+import { apiClient } from '@/api/client'
 
 interface AuthState {
   user: User | null