---
description: Import patterns for the Sim application
globs: ["apps/sim/**/*.ts", "apps/sim/**/*.tsx"]
---

# Import Patterns

## Absolute Imports

**Always use absolute imports.** Never use relative imports.

```typescript
// ✓ Good
import { useWorkflowStore } from '@/stores/workflows/store'
import { Button } from '@/components/ui/button'

// ✗ Bad
import { useWorkflowStore } from '../../../stores/workflows/store'
```

## Barrel Exports

Use barrel exports (`index.ts`) when a folder has 3+ exports. Import from barrel, not individual files.

```typescript
// ✓ Good
import { Dashboard, Sidebar } from '@/app/workspace/[workspaceId]/logs/components'

// ✗ Bad
import { Dashboard } from '@/app/workspace/[workspaceId]/logs/components/dashboard/dashboard'
```

## Import Order

1. React/core libraries
2. External libraries
3. UI components (`@/components/emcn`, `@/components/ui`)
4. Utilities (`@/lib/...`)
5. Stores (`@/stores/...`)
6. Feature imports
7. CSS imports

## Type Imports

Use `type` keyword for type-only imports:

```typescript
import type { WorkflowLog } from '@/stores/logs/types'
```