simstudioai--sim/.claude/rules/sim-imports.md

paths

paths
apps/sim/**/*.ts apps/sim/**/*.tsx

Import Patterns

Absolute Imports

Always use absolute imports. Never use relative imports.

// ✓ 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.

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

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

Code-splitting through barrels

When you lazy(() => import(...)) a component to keep it out of a route's initial bundle, import the deep module path (./components/foo/foo), never the barrel — and delete the now-dead barrel re-export of that component. This app has no "sideEffects": false in apps/sim/package.json, so when any sibling still imports that barrel, webpack can conservatively keep the barrel's re-export edge to the heavy module. A leftover export { Foo } from './foo' line can therefore drag Foo (and its transitive deps) back into the initial chunk and silently defeat the split. Removing the dead re-export is the guaranteed fix; verify with a production bundle diff, not by eyeballing the lazy() call.

// ✓ Good — deep lazy import + no barrel edge left behind
const MothershipView = lazy(() =>
  import('./components/mothership-view/mothership-view').then((m) => ({ default: m.MothershipView }))
)
// (and remove `export { MothershipView } from './mothership-view'` from components/index.ts)

Wrap the lazy component in a local <Suspense> so its suspension resolves at the nearest boundary instead of bubbling to the page-level fallback (which would flash the whole route). React.lazy(memo(forwardRef(...))) forwards a DOM ref correctly in React 19 — but during the fallback window ref.current is null, so every consumer must guard it (if (!el) return / el?.).

No Re-exports

Do not re-export from non-barrel files. Import directly from the source.

// ✓ Good - import from where it's declared
import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'

// ✗ Bad - re-exporting in utils.ts then importing from there
import { CORE_TRIGGER_TYPES } from '@/app/workspace/.../utils'

Import Order

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

Type Imports

Use type keyword for type-only imports:

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